CSSだけで行うクリックで画像を拡大

bouquet

HTML

<div class="resize" tabindex="0"><img src="https://tenman.info/labo/css/files/bouquet.jpg" alt="bouquet" width="1920" height="1203" /></div>

CSS

.entry-content .resize{
 width:296px;
 display:block;
 padding:1em;
 box-sizing:border-box;
 transition: all 1s ease-in-out;
}
.resize:focus{
 height:auto;
 width:100%;
 transition: all 1s ease-in-out;
 outline:none;
}

備忘

2017/6/8 .resize直下のimg要素が、p要素でラップされて、マージンがおかしくなっていたので修正

追加CSS

.resize > p{
 margin:0;
 line-height:1;
}

関連

画像をCSSだけで、ポップアップする

CSSイベントが出来て、何がそんなにうれしいの? – WordPress Snippet


新着記事

コメントは受け付けていません。