CSS note

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要素が、ｐ要素でラップされて、マージンがおかしくなっていたので修正

追加CSS

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

関連

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

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

新着記事