読者です 読者をやめる 読者になる 読者になる

JaGraプロフェッショナルDTP&Webスクール スキルアップブログ

JaGraプロフェッショナルDTP&Webスクールの講師とスタッフが綴る、日々感じたさまざまなできごとやお役立ち情報!

マウスオーバー時に画像を半透明にする

Web 講師

JaGraプロフェッショナルDTP&Webスクール スキルアップブログのCSSに次のコードを加えました。これによって、マウスオーバー時に画像が半透明(正確には不透明度70%)になります。

リンク設定されている画像は、クリッカブルであることを示すためのインタラクションを加えるべきですが、マウスオーバー時の画像を用意するまでもない、といったケースには、CSSだけで実装できるので、使いどころがありそうです。


a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70); /* IE6/7 */
}