CSSだけでaタグ内の画像をマウスオーバー時に半透明にしてみる

JavaScriptを使わずにCSSだけでaタグ内の画像をマウスオーバー時に半透明にしてみます。

1．使用する画像

2．CSSの記述例

<style type="text/css">
<!--
a:hover img{
	opacity:0.5;
	-moz-opacity:0.5;
	filter:alpha(opacity = 50);
}
-->
</style>

これだけです。

3．HTMLの記述例

<a href="/"><img src="i01.jpg" alt="マウスオーバー用の画像" width="160" height="160"></a>

コチラもこれだけです。

CSSだけでマウスオーバー時にaタグの画像を半透明に表示デモ

手っ取り早くページ内のリンクボタン画像にマウスオーバーされてる感を出す際に使えそうな気がします。

※流用される場合は自己責任でお願いします。