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