低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

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

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

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

HTML

1<a href="#" class="sampleImg">
2    <img src="./demo.jpg" />
3</a>

CSS

1sampleImg.a:hover img {
2    opacity: 0.8;
3    filter: alpha(opacity=80);
4}

サンプルページ

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

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

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

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ