画像ホバーアニメーションの作り方

画像をホバーしたときのアニメーションを付けることで、ユーザーの印象に残りやすくしたり、操作を快適にさせることができます。自分としてもWebサイトにちょっとしたアニメーションが付いていると、色々な画像をホバーしてみたくなります。そんなホバーアニメーションを自分でも実装してみました。

＊DEMO

＊環境

MacOS
CSS3

＊画像ホバーで画像が拡大する

transform と scale 関数を使います。
transform は要素の変形を指定するプロパティで、scale 関数で拡大縮小をすることができます。

画像を横並びにした HTML です。

<div class="image-body">
  <div class="image-content">
    <div class="image">
      <img src="https://cdn.pixabay.com/photo/2015/09/09/11/01/animal-931355_1280.jpg" alt="Miniature Dachshund">    
    </div>
  </div>
  <div class="image-content">
    <div class="image">
      <img src="https://cdn.pixabay.com/photo/2017/07/25/14/15/akita-2538276_1280.jpg">
    </div>
  </div>
  <div class="image-content">
    <div class="image">
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Shibainu_Maru.jpg/1599px-Shibainu_Maru.jpg">  
    </div>
  </div>
</div>

CSS で imageクラス付けた要素をhoverしたときにtransform: scale(1.1, 1.1)で画像を 1.1 倍に拡大しています。画像を表示しているdivタグに高さ、幅、overflow: hiddenを指定すると、拡大時も要素自体の高さと幅は固定されたままになります。拡大が滑らかに表示されるようtransition: all 0.5sを指定してアニメーションにしています。これがないとカクカク表示されます。

.image-body {
  display: flex;
}

.image-content {
  width: 240px;
  height: 150px;
  margin-right: 5px;
  overflow: hidden;

  &:hover .image {
    transform: scale(1.1, 1.1)
  }
}

.image {
  transition: all 0.5s;  
}

img {
  height: 150px;
}

＊画像ホバーで文字が浮き出る

先ほどの HTML に、名前を表示するためのdivタグを追加します。画像の下に追加します。

<div class="image-body">
  <div class="image-content">
    <div class="image">
      <img src="https://cdn.pixabay.com/photo/2015/09/09/11/01/animal-931355_1280.jpg" alt="Miniature Dachshund">    
    </div>
    <div class="name">
      Miniature Dachshund
    </div>
  </div>
  <div class="image-content">
    <div class="image">
      <img src="https://cdn.pixabay.com/photo/2017/07/25/14/15/akita-2538276_1280.jpg">
    </div>
    <div class="name">
      Akita Dog
    </div>
  </div>
  <div class="image-content">
    <div class="image">
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Shibainu_Maru.jpg/1599px-Shibainu_Maru.jpg">  
    </div>
    <div class="name">
      Shiba Dog
    </div>
  </div>
</div>

CSS にnameクラスを新しく追加してposition: absoluteで文字が画像の上に重なるようにします。親となる要素（今回は画像）にposition: relativeを指定する必要があります。
文字を画像の中央に表示させるためにtop,left,transformを指定しています。

文字を画像の中央に表示させることができたら、これを最初はopacity: 0で非表示にしておいて、画像がホバーされたらopacity: 1にして表示させます。また、今回は文字を目立たせるために、ホバー時に画像を少し透過させています。画像の拡大と同様、nameクラスにもtransition: all 0.5sを指定して滑らかに文字が表示されるようにしています。

.image-body {
  display: flex;
}

.image-content {
  width: 240px;
  height: 150px;
  margin-right: 5px;
  position: relative;     // ← 追加
  overflow: hidden;

  // ---- ↓追加 ----
  &:hover .name {
    opacity: 1;
  }
  
  &:hover .image {
    opacity: 0.5;       // ← 追加
    transform: scale(1.1, 1.1)
  }
}

.image {
  transition: all 0.5s;  
}

// ---- ↓追加 ----
.name {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  transition: all 0.5s;  
}

img {
  height: 150px;
}

＊画像ホバーで画像が暗くなる

ホバー時に画像を少し透過させるようにしましたが、これだけだと文字が目立たないので、更に少し画像を暗くして白い文字が目立つようにします。

HTML は上で使った状態のままです。
CSS で画像を表示しているdiv要素にbackground-color: #000を指定して背景色を付けます。
画像ホバー時にopacity: 0.5を指定して画像を少し透過させているので、黒い背景色が反映されて暗くなります。

.image-body {
  display: flex;
}

.image-content {
  width: 240px;
  height: 150px;
  margin-right: 5px;
  position: relative;
  background-color: #000;      //← 追加
  overflow: hidden;

  &:hover .name {
    opacity: 1;
  }
  
  &:hover .image {
    opacity: 0.5;             // ← ここで透過させる
    transform: scale(1.1, 1.1)
  }
}

.image {
  transition: all 0.5s;  
}

.name {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  transition: all 0.5s;  
}

img {
  height: 150px;
}

＊所感

ホバー時に表示する文字にフォーカスが当たると、画像の透過が消える事象が発生したので、要素の構成やクラスの指定方法などはよく考える必要がありました。CSS だけで実装できるアニメーションは動作が軽いので、JavaScript を使わずにできる限り CSS を使いたい気持ちです。CSS でもっと色々なアニメーションが実現できそうなので、追求していきたいと思います。

もぐもぐプログラミング

＊DEMO

＊環境

＊画像ホバーで画像が拡大する

＊画像ホバーで文字が浮き出る

＊画像ホバーで画像が暗くなる

＊所感

人気の投稿