マウスオーバー(hover)で画像または要素を半透明にする

画像リンクをマウスオーバーした時に半透明にしたり、カラーフィルターをかけたようにする方法です。

*IE6以上で表示されます。

画像をマウスオーバーで30%透明にする

↓完成画像

html

<a href="#" class="glow"><img src="images/linkButton.jpg" alt="Link Button" width="310" height="60"  /></a>

*aタグにクラス「glow」(任意のクラス名)をつけます。


css

.glow:hover {
 filter:alpha(opacity=70); /* IE 6,7*/
   -moz-opacity:0.7; /* IE 8,9 */
   opacity:0.7;
}
/* IE8 */
html>/**/body .glow:hover {
 display /*\**/:inline-block\9;
  zoom /*\**/: 1\9;
}
/* 新旧Firefox */
.glow:hover, x:-moz-any-link { background: #fff;}
.glow:hover, x:-moz-any-link, x:default { background: #fff;}

*1〜4行目のopacityにかける数値は、何%みえるように設定するかという事です。
(40%透明にしたいなら60、0.6)

基本、hover時にopacityの設定ですが、IE8のみinline-blockを入れないと挙動しなかったので、ハックで追加してあります。(画像リンクのみ)
(旧Firefoxでbackgroundを入れないとダメなので同じようにハックで追加しました)


設定によってはIE8以下でうまく表示されない事があります。
下記2つのどちらかで解決できます。
cssを「.glow:hover」→「.glow img:hover」に変更する。(4ヶ所)
・htmlのクラス「glow」をaではなく画像(img)に入れる。

画像以外(テキストなど)のリンク範囲をマウスオーバーで30%透明にする

↓完成画像(先ほどのデモ2つ目の方です)

html

<li class="text"><a href="#"><span class="glow">→ Text Link Button</span></a></li>

css(先ほどの↑画像を透明にするcssに↓追加)

li.text span.glow {
display:block;
height:58px;
line-height:58px;
width:289px;
padding-left:20px;
font-size:200%;
color:#ca291d;
background:#eef3f5;
border-bottom:1px solid #898f92;
border-right:1px solid #898f92;
padding-top:1px;
}

カラーなどはご自由に設定ください。
*ポイントはhtmlの「span」にクラス(glow)をつけて、css「display:block;」でブロック要素にして幅と高さを入れる事です。(リンク範囲を設定する)

マウスオーバーで30%透明カラーフィルターをかけたようにする

↓完成画像

「.glow」の親要素に↓でOKです。
background: #fff7d7; (好きな色)

html

<li><a href="#" class="glow"><img src="images/linkButton.jpg" alt="Link Button" width="310" height="60"  /></a></li>

css

li {
background:#c7edff; /*hover時の背景カラー設定*/
}

先ほどの↓こちらに↑こちらを追加するだけ

.glow:hover {
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
}
/* IE8 */
html>/**/body .glow:hover {
display /*\**/:inline-block\9;
zoom /*\**/: 1\9;
}

/* 新旧Firefox */
.glow:hover, x:-moz-any-link { background: #fff;}
.glow:hover, x:-moz-any-link, x:default { background: #fff;}

*テキストなど画像以外の場合も同様で、親要素に背景色を設定するだけです。
(デモ参考)

注意点

aにdisplay:blockを設定すると下記ブラウザがうまく表示されなくなります。
chromefirefoxは問題ございません)
・画像→IE8以下(inline-blockを入れているため)
・テキストなど要素リンク→IE10以下


opacityは子要素も含めて透過させるので文字も透明になります。
文字は透過させず背景のみ透明にする場合はopacityではなく「rgba」で背景を設定する方法を使います。
(詳しくはこちらの記事で)



【関連記事】
▼opacityを全ブラウザに対応させるcss
http://d.hatena.ne.jp/soratomo0714/20160214/

▼IE8以下でもrgbaを使って、マウスオーバー時に文字(子要素)はそのままで背景のみを透明にする
http://d.hatena.ne.jp/soratomo0714/20160219/