HOME > 開発者向けBLOG > Webデザイン >  CSSだけで画像に白い半透明のマウスオーバー

Technology Note 開発者向けBLOG

Webデザイン

CSSだけで画像に白い半透明のマウスオーバー

こんにちは、ゼノフィ渡部です。

CSSだけで画像に白い半透明のマウスオーバーを実現する方法をご紹介いたします。

下記のCSSでは「.alpha」クラスのa要素がhoverする際のimgに対してスタイルが効くようにしています。

1行目の「opacity: 0.7;」でimgの透明度を変更しています。

2行目の「 filter: alpha(opacity=70);」はIE用の指定で、IEにも対応するようにしています。

1
2
3
4
5
.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

下記のHTMLソースでは「.alpha」クラスのa要素内にimgを記述しています。

1
2
3
4
5
<div class="alpha">
    <a href="#">
        <img src="sky.jpg" width="640" height="480" alt="空" />
    </a>
</div>

サンプルを見ると、画像のオンマウス時に画像が白く半透明になっていることがわかります。

サンプル

CSS

1
2
3
4
5
.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

CSS

1
2
3
4
5
<div class="alpha">
    <a href="#">
        <img src="sky.jpg" width="640" height="480" alt="空" />
    </a>
</div>

PAGETOP