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タグの画像を半透明に表示デモ
手っ取り早くページ内のリンクボタン画像にマウスオーバーされてる感を出す際に使えそうな気がします。
※流用される場合は自己責任でお願いします。
-
前の記事
jQueryの.cssとzoomでページ全体を拡大・縮小表示してみる 2019.04.18
-
次の記事
jQueryのtoggleを使ってアコーディオン風にコンテンツを開閉表示してみる 2019.04.20