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イベントが出来て、何がそんなにうれしいの? – WordPress Snippet