【css】画像をホバーした時のエフェクト9選！テキストの表示など

今回は、cssのみで実装できる画像をホバーしたときのエフェクトを紹介したいと思います。
画像をズームする方法やテキストを表示させる方法など全部で9パターンをご紹介いたします。

目次

1. ホバーで画像をズームイン

完成形デモ

See the Pen hover zoom-in by crnote (@crnote) on CodePen.

html

htmlの記述は以下の通りです。

  1. <body>
  2.   <section class="zoom-in">
  3.     <div class="zoom-in-img">
  4.   <img src="https://cr-note.com/wp-content/themes/crnote/assets/img/blog/column22-img1.jpg" alt="cafe">
  5.     </div>
  6.   </section>
  7. </body>

CSS

画像のスタイル

CSSで、画像の大きさなどを設定します。
「overflow: hidden;」ではみ出す要素は非表示に設定しておきます。

  1. .zoom-in-img {
  2.   max-width: 320px;
  3.   height:213px;
  4.   margin: 0;
  5.   padding: 0;
  6.   background: #fff;
  7.   overflow: hidden;
  8.   cursor: pointer;
  9. }
  10. .zoom-in-img img {
  11.   width: 100%;
  12.   height: 100%;
  13. }
ホバーエフェクト

transitionプロパティを使って、ホバー時の変化の仕方を設定します。

transitionプロパティの記述の仕方は、

transition:　変化の対象　変化の時間　変化の仕方;

となります。

画像のズームの設定は、transformプロパティを使用します。

transform: scale()で要素の拡大縮小させることが出来ます。

記述の仕方は、

transform: scale(数値, 数値)

となります。1つ目の数値はX方向、2つ目の数値はY方向の比率です。X方向、Y方向の比率が同じ場合は2つ目の数値は省略出来ます。

ホバー前（通常時）を1→ホバー時1.3とすることで画像をズームインしています。

  1. /*ホバーエフェクト*/
  2. .zoom-in-img img {
  3.   transform: scale(1);
  4.   transition: .3s ease-in-out;
  5. }
  6. .zoom-in-img:hover img {
  7.   transform: scale(1.3);
  8. }

2. ホバーで画像をズームアウト

完成形デモ

See the Pen hover zoom-out by crnote (@crnote) on CodePen.

CSS

ズームアウトの場合、先ほどとは逆にホバー前（通常時）を1.3→ホバー時1とすることで画像をズームアウトさせることが出来ます。

  1. /*ホバーエフェクト*/
  2. .zoom-out-img img {
  3.   transform: scale(1.3);
  4.   transition: .3s ease-in-out;
  5. }
  6. .zoom-out-img:hover img {
  7.   transform: scale(1)

3. ホバーで画像をモノクロに

完成形デモ

See the Pen hover grayscale by crnote (@crnote) on CodePen.

CSS

モノクロの設定は、filterプロパティを使用します。

filter: scale()で画像をグレースケールに変換します。

記述の仕方は、

filter: scale(数値)

となります。0%で変化がなく、100%で完全にグレースケールとなります。

ホバー時に100%とすることで画像がモノクロに変換されます。

  1. /*ホバーエフェクト*/
  2. .grayscale-img img {
  3.   transition: .3s ease-in-out;
  4. }
  5. .grayscale-img:hover img {
  6.   filter: grayscale(100%);
  7. }

4. ホバーで画像をセピア調に

完成形デモ

See the Pen hover sepia by crnote (@crnote) on CodePen.

CSS

filter: sepia()で画像をセピア調に変換します。

記述の仕方は、

filter: sepia(数値)

となります。グレースケールの時と同じく、0%で変化がなく、100%で完全にセピア調になります。

ホバー時に100%とすることで画像がセピア調に変換されます。

  1. /*ホバーエフェクト*/
  2. .sepia-img img {
  3.   transition: .3s ease-in-out;
  4. }
  5. .sepia-img:hover img {
  6.   filter: sepia(100%);
  7. }

5. ホバーで画像をぼかす

完成形デモ

See the Pen hover blur by crnote (@crnote) on CodePen.

CSS

filter: blur()で画像をぼかします。

記述の仕方は、

filter: blur(数値)

数値はピクセル数で指定します。

今回は、ホバー時に3pxを指定して画像をぼかしています。

  1. /*ホバーエフェクト*/
  2. .blur img {
  3.   transition: .3s ease-in-out;
  4. }
  5. .blur:hover img {
  6.   filter: blur(3px);
  7. }

6. ホバーで画像の上にテキストを表示

完成形デモ

See the Pen hover text1 by crnote (@crnote) on CodePen.

html

htmlの記述は以下の通りです。
class名「hover-text」の部分が、ホバーしたときに表示されるテキストになります。

  1. <body>
  2.   <section class="hover">
  3.     <div class="hover-img">
  4.       <img src="https://cr-note.com/wp-content/themes/crnote/assets/img/blog/column22-img1.jpg" alt="cafe">
  5.     </div>
  6.     <div class="hover-text">
  7.       <p class="text1">coffee</p>
  8.       <p class="text2">Is delicious; let's take a break in having served coffee</p>
  9.     </div>
  10.   </section>
  11. </body>

CSS

画像とテキストのスタイル

親要素の「.hover」に「position: relative;」、小要素の「.hover-text」に「position: absolute;」を指定し、画像とテキスト部分が重なるようにします。
「.hover-text」に「opacity: 0;」を指定し、透明にすることで非表示にします。

  1. .hover {
  2.   position: relative;
  3.   width: 320px;
  4.   height:213px;
  5. }
  6. .hover .hover-img {
  7.   margin: 0;
  8.   padding: 0;
  9. }
  10. .hover-img img {
  11.   width: 100%;
  12.   height: 100%;
  13. }
  14. .hover .hover-text {
  15.   position:    absolute;
  16.   width: 100%;
  17.   height: 100%;
  18.   top: 0;
  19.   left: 0;
  20.   color: #fff;
  21.   background-color:    rgba(0,0,0,0.65);
  22.   /*透明にして表示させない*/
  23.   opacity: 0;
  24.   /*ホバーの動き方*/
  25.   transition: .3s ease-in-out;
  26. }
  27. .hover .hover-text .text1 {
  28.   font-size: 22px;
  29.   padding: 10px 20px;
  30. }
  31. .hover .hover-text .text2 {
  32.   font-size: 16px;
  33.   padding: 0 20px;
  34. }
ホバーエフェクト

ホバーしたときに、「.hover-text」に「opacity: 1;」を指定することで、不透明になりテキストが表示されます。

  1. /*ホバーエフェクト*/
  2. .hover:hover .hover-text {
  3.   /*不透明にして表示*/
  4.   opacity: 1;
  5. }

7. ホバーでテキストが上からスライドして表示

完成形デモ

See the Pen hover text2 by crnote (@crnote) on CodePen.

CSS

htmlやcssの書き方は、上記の「6. ホバーで画像の上にテキストを表示」とほぼ同じです。
ホバー時に「padding-top: 10px;」を指定することで、上からスライドする動きを付けることが出来ます。

  1. .hover {
  2.   position: relative;
  3.   width: 320px;
  4.   height:213px;
  5.   overflow: hidden;
  6. }
  7. .hover .hover-img {
  8.   margin: 0;
  9.   padding: 0;
  10. }
  11. .hover-img img {
  12.   width: 100%;
  13.   height: 100%;
  14. }
  15. .hover .hover-text {
  16.   position:    absolute;
  17.   width: 100%;
  18.   height: 100%;
  19.   top: 0;
  20.   left: 0;
  21.   color: #fff;
  22.   background-color:    rgba(0,0,0,0.65);
  23.   /*透明にして表示させない*/
  24.   opacity: 0;
  25.   /*ホバーの動き方*/
  26.   transition: .3s ease-in-out;
  27. }
  28. .hover .hover-text .text1 {
  29.   font-size: 22px;
  30.   padding: 0 20px 10px;
  31. }
  32. .hover .hover-text .text2 {
  33.   font-size: 16px;
  34.   padding: 0 20px;
  35. }
  36. /*ホバーエフェクト*/
  37. .hover:hover .hover-text {
  38.   /*不透明にして表示*/
  39.   opacity: 1;
  40.   /*padding-topで上からスライド*/
  41.   padding-top: 10px;
  42. }

8. ホバーで中央からテキストを表示

完成形デモ

See the Pen hover text3 by crnote (@crnote) on CodePen.

CSS

「.hover-text」に「transform: scale(0);」を指定し、テキスト部分を非表示にしておきます。
ホバー時に「transform: scale(1);」とすることで、テキスト部分を中央から上下左右に広がるように表示出来ます。

transform: scale()については、上記の「1. ホバーで画像をズームイン」でも解説しています。

  1. .hover {
  2.   position: relative;
  3.   width: 320px;
  4.   height:213px;
  5.   overflow: hidden;
  6. }
  7. .hover .hover-img {
  8.   margin: 0;
  9.   padding: 0;
  10. }
  11. .hover-img img {
  12.   width: 100%;
  13.   height: 100%;
  14. }
  15. .hover .hover-text {
  16.   position:    absolute;
  17.   width: 100%;
  18.   height: 100%;
  19.   top: 0;
  20.   left: 0;
  21.   color: #fff;
  22.   background-color:    rgba(0,0,0,0.65);
  23.   /*透明にして表示させない*/
  24.   opacity: 0;
  25.   /*ホバーの動き方*/
  26.   transition: .3s ease-in-out;
  27. }
  28. .hover .hover-text .text1 {
  29.   font-size: 22px;
  30.   padding: 0 20px 10px;
  31. }
  32. .hover .hover-text .text2 {
  33.   font-size: 16px;
  34.   padding: 0 20px;
  35. }
  36. /*ホバーエフェクト*/
  37. .hover:hover .hover-text {
  38.   /*不透明にして表示*/
  39.   opacity: 1;
  40.   /*padding-topで上からスライド*/
  41.   padding-top: 10px;
  42. }

9. ホバーで背景ごと上からスライドして表示

完成形デモ

See the Pen hover text4 by crnote (@crnote) on CodePen.

CSS

「.hover-text」に「top: -100%;」を指定し、テキスト部分を非表示にしておきます。
ホバー時に「top: 0;」とすることで、背景ごとテキスト部分を上からスライドして表示することが出来ます。

  1. .hover {
  2.   position: relative;
  3.   width: 320px;
  4.   height:213px;
  5.   overflow: hidden;
  6. }
  7. .hover .hover-img {
  8.   margin: 0;
  9.   padding: 0;
  10. }
  11. .hover-img img {
  12.   width: 100%;
  13.   height: 100%;
  14. }
  15. .hover .hover-text {
  16.   position:    absolute;
  17.   width: 100%;
  18.   height: 100%;
  19.   /*topを-100%にして非表示*/
  20.   top: -100%;
  21.   left: 0;
  22.   color: #fff;
  23.   background-color:    rgba(0,0,0,0.65);
  24.   /*ホバーの動き方*/
  25.   transition: .35s ease-in-out;
  26. }
  27. .hover .hover-text .text1 {
  28.   font-size: 22px;
  29.   padding: 10px 20px;
  30. }
  31. .hover .hover-text .text2 {
  32.   font-size: 16px;
  33.   padding: 0 20px;
  34. }
  35. /*ホバーエフェクト*/
  36. .hover:hover .hover-text {
  37.   /*topを0にして上からスライド*/
  38.   top: 0;
  39. }

まとめ

以上、cssのみで実装できる画像をホバーしたときのエフェクトを9つご紹介いたしました。
少し動きを付けるだけで、ユーザーの注目を集めることが出来ます。
いろんな場面で是非試してみてください！

PAGE TOP