超シンプル！hover画像作る必要ナシ、CSSだけで、画像をロールオーバー！ ｜ しらさかブログロールオーバー画像作るとき、どうしていますか？ 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 等に変更する事でカスタマイズ可能で
