皆さまこんにちは。
今回も備忘録がてら、CSSについての記事を掲載します。
そして今回も短くてすみません（汗

今回のテーマ

では、本題です。
画像リンクの際、マウスオーバーで効果を付けたい場合に使用するCSSです。
以前はマウスオーバー時に一つ一つ画像を置換させていましたが、今ではCSS一発で問題解消です。便利な世の名になりました！

サンプル

こんな感じのリンク画像があるとします。※リンク先は#になってます。

マウスオーバーしても、マウスカーソルが変わるだけで、画像は変わりません。
これだと、画像にリンクが貼ってあるのか分かりにくいので、ユーザービリティの観点からよろしくないですよね。

というわけで、ユーザーに優しいウェブサイトの構築を目指すために、マウスオーバー時に画像が透過するようにCSSを追加してみましょう。

ここでCSSのopacityプロパティを使います。
opacityプロパティとは

opacityプロパティは、要素の透明度を指定する際に使用します。

透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で指定します。この範囲からはみ出した値を指定しても範囲内に収められます。

と、リファレンスに書いてありますね。（手抜き！）

CSS

img:hover {
	opacity: 0.5 ;
}

こんな感じで、マウスオーバー時に分かりやすく画像が透過されるようになりました。
あ、opacityは0～1で設定してください。簡単でしたね（＾▽＾）

おまけ

さらに高見を目指して！
というわけで、上記のopacityプロパティにtransitionプロパティを追加して、より洗練された画像リンクにしたいと思います。

transition-propertyプロパティは、transition（時間的変化）効果を適用するCSSプロパティ名を指定する際に使用します。

CSS

img {
	transition: 0.6s ;
}

img:hover {
	opacity: 0.5 ;
}

を追加したいと思います。

どうでしょうか？
フワァ～っと画像が透過されるようになりました。より洗練されたナイスなリンク画像になりましたね。

というわけで、簡単にカッコいいリンク画像になるので、みなさんも是非是非使ってみてください。
では、以上です。

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, , ,