画像を用意しなくてもCSSだけでロールオーバー効果を表現するテクニック

画像のロールオーバーに関するまとめ記事を更新しました。下記リンクよりご覧ください。
【比較】覚えておきたいロールオーバー画像切替え 5つの手法（CSS？JS？onmouseover？）

通常、ロールオーバーで画像を変化させて強調する場合には、ロールオーバー前の画像とロールオーバー後の画像、2種類を用意しなければなりませんが、そんな手間をかけずとも、CSSだけで画像を変化させて強調するテクニックがあります。今回はそれをご紹介します。

HTML

CSS

サンプルページ

ここで使用されているopacityプロパティは、CSS3で追加される予定の透明度に関するプロパティであり、1を基準として、0に近付くほど透明度が高くなっていく仕様です。これをロールオーバー時のスタイルに適用することで、画像の透明度を上げ、ホバーで画像を変化させたような効果が得られるわけです。

IEではこのプロパティが利用できないため、IE独自のフィルタであるfilter: alphaを使用することで同様の効果を表現しています。

注意点としては、画像の透明度自体を上げるプロパティであるため、背景画像や背景色を指定している場合はそれらが透けてしまう可能性があるという点です。そういったデザインではない場合で、手軽にロールオーバーのような効果を表現したい場合は、上記のテクニックを使用してみてください。