CSSだけでaタグ内の画像をマウスオーバー時に半透明にする方法 DAD UNION

JavaScriptを使わずにCSSだけでaタグ内の画像をマウスオーバー時に半透明にする方法をご紹介します。

Contents

半透明にするために使用した画像

※これだけです。aタグhover時に50％に透過してます。

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

※コチラもこれだけです。必要に応じて変更して下さい。

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

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

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。