CSSでマウスオーバーで画像にエフェクトを入れる方法！
CSSでマウスオーバーで画像にエフェクトを入れる方法について解説します。CSSでマウスオーバーで画像にエフェクトを入れることで、ユーザーに対して画像を強調することができます。ここでは様々なエフェクトの入れ方について紹介します。
CSSでマウスオーバーで画像にエフェクトを入れたい
CSSでマウスオーバーで画像にエフェクトを入れて、ユーザーに対して画像を強調したいということがあります。
実際に以下の画像を用いて様々なエフェクトを入れる方法について項目ごとに見ていきましょう。
CSSでマウスオーバーで画像にエフェクトを入れる方法
ではCSSで画像をホバーした際に様々なエフェクトを入れる方法について以下の項目で見ていきましょう。
なおHTMLの構成は全てにおいて同じで以下のような形になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="img_container">
<img src="DSC_0158_2-min.JPG" width="100%" height="100%">
</div>
</body>
</html>画像を暗くする方法
CSSで画像を暗くするには擬似要素を用います。
今回はまず親要素の.img_containerにposition: relative;を、子要素となる.img_container::beforeにposition: absolute;を追記し、そして親要素全体を子要素で被せるためにボックスの重なりの順序を制御するz-indexプロパティでz-index: 2;としておきます。
そしてホバーしたタイミングで画像を暗くしたいので、.img_container:hover::beforeにbackground-color: rgba(0, 0, 0, 0.4);を追記し、透明感のある黒色を背景色とします。
またフェードして暗くするために.img_container::beforeにtransition: background-color 0.5s;を追記しており、0.5秒かけて暗くなるように表示させています。
では実際にサンプルコードを用いて挙動を見てみましょう。
このように画像をホバーすると暗くなることが分かります。
簡潔にCSSを記述する方法
擬似要素を用いなくても、ホバーした際に画像を暗くすることができます。その方法について簡単に解説します。
親要素である.img_containerにbackground-color: black;を設定します。
そしてホバーした際にimgに透明度を持たせるために、.img_container:hover imgにopacity: 0.6;を設定します。
これだけでも同じようにホバーすると画像を暗く表示することができます。
では実際にサンプルコードを用いて挙動を見てみましょう。
このように同様の結果が得られていることが分かります。
画像を拡大する方法
画像を拡大する方法はとてもシンプルです。
ホバーした際に画像を拡大するので、.img_container:hover imgにtransform: scale(1.5);を加えることで画像を拡大させます。
またtransition: transform .5s;でフェードさせています。
注意点
画像を親要素の枠からはみ出して拡大したい時は何も設定は要らないのですが、親要素の枠に収めたい時は親要素である.img_containerにoverflow: hidden;を追記する必要があります。
では実際にサンプルコードを用いて挙動を見てみましょう。
このように画像をホバーすると親要素の枠内で画像が拡大されていることが分かります。
画像を動かす方法
画像を動かす方法として今回はホバーすると画像が横回転する方法について紹介します。
ホバーした際に画像を横回転させるためには、.img_container:hover imgに transform: rotateY(360deg);を追記します。rotateYとすることで横方向に、360degとすることで360度回転させることができます。
もし縦方向に360度回転させるにはrotateYをrotateXに変えます。
では実際にサンプルコードを用いて挙動を見てみましょう。
このようにホバーすると画像が横回転していることが分かります。
画像の色を変える方法
ここではモノクロカラーからカラーに色を変える方法について紹介します。
まずモノクロカラーにするために、imgにfilter: grayscale(100%);を設定します。これでモノクロカラーにすることができます。
そしてホバーしたタイミングでimgをカラーにしたいので、.img_container:hover imgにfilter: grayscale(0%);を設定します。
これでモノクロカラーからカラーに変えることができます。
では実際にサンプルコードを用いて挙動を見てみましょう。
このようにホバーするとモノクロカラーからカラーに変わっていることが分かります。
まとめ
いかがでしたでしょうか？
ここで紹介した方法をぜひ組み合わせて使ってみると、様々なおもしろいエフェクトを作成することができます。
また以下に載せてある記事を用いることで、さらにおしゃれなWEBページを作成することができるので、ぜひ参考にしてみてください。
