CSSでマウスオーバーで画像にエフェクトを入れる方法!

CSSでマウスオーバーで画像にエフェクトを入れる方法について解説します。CSSでマウスオーバーで画像にエフェクトを入れることで、ユーザーに対して画像を強調することができます。ここでは様々なエフェクトの入れ方について紹介します。

コンテンツ [表示]

  1. 1CSSでマウスオーバーで画像にエフェクトを入れたい
  2. 2CSSでマウスオーバーで画像にエフェクトを入れる方法
  3. 2.1画像を暗くする方法
  4. 2.2画像を拡大する方法
  5. 2.3画像を動かす方法
  6. 2.4画像の色を変える方法
  7. 3まとめ

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_containerposition: relative;を、子要素となる.img_container::beforeposition: absolute;を追記し、そして親要素全体を子要素で被せるためにボックスの重なりの順序を制御するz-indexプロパティでz-index: 2;としておきます。

そしてホバーしたタイミングで画像を暗くしたいので、.img_container:hover::beforebackground-color: rgba(0, 0, 0, 0.4);を追記し、透明感のある黒色を背景色とします。

またフェードして暗くするために.img_container::beforetransition: background-color 0.5s;を追記しており、0.5秒かけて暗くなるように表示させています。

では実際にサンプルコードを用いて挙動を見てみましょう。

このように画像をホバーすると暗くなることが分かります。

簡潔にCSSを記述する方法

擬似要素を用いなくても、ホバーした際に画像を暗くすることができます。その方法について簡単に解説します。

親要素である.img_containerbackground-color: black;を設定します。

そしてホバーした際にimgに透明度を持たせるために、.img_container:hover imgopacity: 0.6;を設定します。

あわせて読みたい
opacity
CSSのopacityプロパティは要素の透明度を指定するプロパティです。opacityプロパティの構文や使い方をサンプルコード付きで解説します。

これだけでも同じようにホバーすると画像を暗く表示することができます。

では実際にサンプルコードを用いて挙動を見てみましょう。

このように同様の結果が得られていることが分かります。

画像を拡大する方法

画像を拡大する方法はとてもシンプルです。

ホバーした際に画像を拡大するので、.img_container:hover imgtransform: scale(1.5);を加えることで画像を拡大させます。

またtransition: transform .5s;でフェードさせています。

注意点

画像を親要素の枠からはみ出して拡大したい時は何も設定は要らないのですが、親要素の枠に収めたい時は親要素である.img_containeroverflow: hidden;を追記する必要があります。

あわせて読みたい
overflow
CSSのoverflowプロパティは要素の内容がボックスの範囲から溢れる場合に、その見せ方を制御するプロパティです。overflowプロパティの構文や使い方をサンプルコード付きで解説します。

では実際にサンプルコードを用いて挙動を見てみましょう。

このように画像をホバーすると親要素の枠内で画像が拡大されていることが分かります。

画像を動かす方法

画像を動かす方法として今回はホバーすると画像が横回転する方法について紹介します。

ホバーした際に画像を横回転させるためには、.img_container:hover imgに transform: rotateY(360deg);を追記します。rotateYとすることで横方向に、360degとすることで360度回転させることができます。

もし縦方向に360度回転させるにはrotateYrotateXに変えます。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにホバーすると画像が横回転していることが分かります。

画像の色を変える方法

ここではモノクロカラーからカラーに色を変える方法について紹介します。

まずモノクロカラーにするために、imgfilter: grayscale(100%);を設定します。これでモノクロカラーにすることができます。

そしてホバーしたタイミングでimgをカラーにしたいので、.img_container:hover imgfilter: grayscale(0%);を設定します。

これでモノクロカラーからカラーに変えることができます。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにホバーするとモノクロカラーからカラーに変わっていることが分かります。

まとめ

いかがでしたでしょうか?

ここで紹介した方法をぜひ組み合わせて使ってみると、様々なおもしろいエフェクトを作成することができます。

また以下に載せてある記事を用いることで、さらにおしゃれなWEBページを作成することができるので、ぜひ参考にしてみてください。

あわせて読みたい
CSSでhover時に画像の切り替えを行う方法!のイメージ
CSSでhover時に画像の切り替えを行う方法!
CSSでhover時に画像の切り替えを行う方法について解説します。CSSでhover時に画像を切り替えることでよりオシャレなWEBページを作成することができます。ここでは2つの画像をいろんなパターンで切り替える方法について紹介します。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次