css

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

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

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

マウスオーバー用の画像

マウスオーバー(hover)時のCSS記述

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

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

aタグ内の画像マウスオーバー時に半透明にするHTMLの記述

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

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

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

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

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

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