画像にロールオーバーの演出をつけるCSSスニペット記事更新日2013年1月4日

影をつけたり、角丸にしたり、便利なCSS3。いろんなワードプレスのテーマで採用されています。

ただ依然としてIEのシェアが多い中、「CSS3を使うのはどうか」と思う方も多いはず。

そこでfilterを利用し、JavaScriptや画像を使わずに、CSS3に近い効果を表現できる、
画像ロールオーバー用のCSSスニペットを紹介いたします。

CTAボタンに使用すれば、クリック率も向上するかもしれません。

画像にロールオーバーの演出をつける簡単CSSコード

CSSを追加していくので、外観 > テーマ編集 > style.cssを開いてください。
※ テーマによっては、style.cssでないこともあります。画像のスタイルを指定しているCSSファイルを探してください。

画像のhoverに、以下のコードを追加します。

a:hover img{
opacity: 0.5;
 filter: alpha(opacity=50);
 -ms-filter: “alpha( opacity=50 )”;
}

こんな一手間だけでもクリック率がぐんと変わったりします。
簡単なので、ぜひ試してみてください。