皆さまこんにちは。
今回も備忘録がてら、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