CSS皆さまこんにちは。今回も備忘録がてら、CSSについての記事を掲載します。今回のテーマでは、本題です。画像リンクの際、マウスオーバーで効果を付けたい場合に使用するCSSです。以前はマウスオーバー時に一つ一つ画像を置換させていましたが、今ではCSS一発で問題解消です。便利な世の名になりました!サンプルこんな感じのリンク画像があるとします。※リンク先は#になってます。マウスオーバーしても、マウスカーソルが変わるだけで、画像は変わりません。これだと、画像にリンクが貼ってあるのか分かりにくいので、ユーザービリティの観点からよろしくないですよね。いうわけで、ユーザーに優しいウェブサイトの構築を目指すために、マウスオーバー時に画像が透過するようにCSSを追加してみましょう。ここでCSSのopacityプロパティを使います。opacityプロパティとはopacityプロパティは、要素の透明度を指定する際に使用します。透明度は、0.0(完全に透明)~1.0(完全に不透明)の数値で指定します。この範囲からはみ出した値を指定しても範囲内に収められます。リファレンスに書いてありますね。;}こんな感じで、マウスオーバー時に分かりやすく画像が透過されるようになりました。あ、opacityは0~1で設定してください。簡単でしたね(^▽^)おまけさらに高見を目指して!というわけで、上記のopacityプロパティにtransitionプロパティを追加して、より洗練された画像リンクにしたいと思います。transition-propertyプロパティは、transition(時間的変化)効果を適用するCSSプロパティ名を指定する際に使用します。;}を追加したいと思います。?フワァ~っと画像が透過されるようになりました。洗練されたナイスなリンク画像になりましたね。いうわけで、簡単にカッコいいリンク画像になるので、みなさんも是非是非使ってみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。technology.。