昔はjavascriptでやってた画像をマウスオーバーしたときに、何らかのアクションを与える効果。それが今ではCSSだけでできるようになりました。このブログでも使ってる効果を紹介します。 画像をマウスオーバーしたときに「半透明」にする img { transition: 0.5s; } img:hover { opacity: 0.6; transition: 0.5s; } 半透明にするプロパティopacityを使って、マウスオーバーしたときに半透明にします。時間効果を与えるtransitionもつけて、ふんわりと変化。 画像をマウスオーバーしたときに「拡大」する <div class="img-block"> <img src="" alt="" /> </div> 画像を固定のブロックで囲みます。 .img-block { width: 300px; height: 300px;
![【CSS】画像をマウスオーバーしたときに効果を与えるメモ4つ | web屋tM](https://cdn-ak-scissors.b.st-hatena.com/image/square/9bf48da90f4d78ce6ddf6d60b360cd3943be4cb6/height=288;version=1;width=512/http%3A%2F%2Fwebya-tm.com%2F2013wytm%2Fwp-content%2Fuploads%2F2014%2F05%2FIMAG1202_1-300x300.jpg)