ロールオーバー画像作るとき、どうしていますか? javascript?CSS Sprites? 画像のロールオーバー、 面倒くさいの極みですよね。 THEメンドクサイ、です。 そんな時、ロールオーバー画像を用意しなくても、 用意した風に装う、ステキな技をご紹介します。 その方法とは、CSSに下記ソースを追加するだけ。 a:hover img{ opacity:0.8; filter:alpha(opacity=80); -ms-filter: “alpha( opacity=80 )”; } Sample たったこれだけで、全てのリンク付き画像がロールオーバーで半透明になり、 まるで、ロールオーバー画像を用意した風になります。 上のソースの例でいうと、 0.8や80というのは、不透明度80%、という意味になるので、 もっと薄くしたい場合は、0.6 、60 等に変更する事でカスタマイズ可能で
![超シンプル!hover画像作る必要ナシ、CSSだけで、画像をロールオーバー! | しらさかブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/072ca1f71fdf67b5c3238bdc976312dbbbe3fa40/height=288;version=1;width=512/https%3A%2F%2Fshirasaka.tv%2Fimg%2Fogp.jpg)