ホバーエフェクト

公開日：2020-10-24 更新日：2020-10-29

1. 概要

マウスカーソルを要素に重ねた時（ホバー時）のエフェクトです。



2. 円をアニメーションで広げる

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .effect1 {
        position: relative;
        border-radius: 100%;
        background: #a0ffa0;
      }
      .effect1:after {
        position: absolute;
        content:"";
        left  : 0;
        top   : 0;
        right : 0;
        bottom: 0;
        background: #50c050;
        z-index: -1;
        border-radius: 100%;
        transition: transform 0.5s, opacity 0.5s;
        transform: scale(1.2);
        opacity: 1;
      }
      .effect1:hover:after {
        transform: scale(2);
        opacity: 0;
      }
    </style>
  </head>
  <body style="margin:0px; background-color:#fff; color:#000;">
    <div class="effect1" style="margin:40px; display: table; width:100px; height:100px;">
      <div style="display:table-cell; vertical-align: middle; text-align:center;">エフェクト</div>
    </div>
  </body>
</html>

実行結果：マウスを重ねると円が広がります。


角を100%丸めることにより、円にします。
border-radius: 100%;
background: #a0ffa0;

1.2倍に拡大した円を before か after で追加します。z-index で追加する層を指定。
.effect1:after {
  transform: scale(1.2);
  z-index: -1;
}

親要素がホバーされた時の after の属性を設定します。
.effect1:hover:after { }

ホバー後に円を透過します。
opacity: 0;

transform の拡大と、透過を0.5秒で変化（アニメーション）するようにします。
transition: transform 0.5s, opacity 0.5s;

円内の文字列を、縦と横で中央揃えにします。
親要素
  display: table;

子要素
  display:table-cell; vertical-align: middle; text-align:center;

3. 複数の文字例を上に移動しながら表示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML・CSS・JavaScript</title>
    <style>
      .effect2 {
        position: relative;
        overflow: hidden;
        width : 200px;
        height: 200px;
      }
      
      /* 画像 */
      .effect2_child1 {
        position: absolute;
        background-image: url("pic.jpg");
        width : 200px;
        height: 200px;
        top:  0px;
        left: 0px;
      }
      
      /* 文字１。最初は非表示（透過） */
      .effect2_child2 {
        position: absolute; 
        width : 200px;
        height: 200px;
        top : 150px;
        left:   0px;
        text-align: center;
        font-size: 48px;
        color: #fff;
        opacity: 0;
        transition: top 0.5s, opacity 0.5s;
        z-index: 1;
      }
      
      /* 文字２。最初は非表示（透過） */
      .effect2_child3 {
        position: absolute; 
        width : 200px;
        height: 200px;
        top : 150px;
        left:   0px;
        text-align: center;
        font-size: 24px;
        color: #fff;
        opacity: 0;
        transition: top 0.5s, opacity 0.5s;
        z-index: 1;
      }
      
      /* 黒の背景。最初は非表示（透過） */
      .effect2_child4 {
        position: absolute;
        width : 200px;
        height: 200px;
        top : 0px;
        left: 0px;
        opacity: 0;
        background-color: #000;
        transition: opacity 0.5s;
      }
      
      /* 文字１を上に移動 */
      .effect2:hover .effect2_child2 {
        top: 50px;
        opacity: 1;
      }
      
      /* 文字２を上に移動 */
      .effect2:hover .effect2_child3 {
        top: 120px;
        opacity: 1;
      }
      
      /* 黒の背景の透過を少し解除 */
      .effect2:hover .effect2_child4 {
        opacity: 0.3;
      }
    </style>
  </head>
  <body style="margin:0px; background-color:#fff; color:#000;">
    
    <div class="effect2" style="margin:10px;">
      <div class="effect2_child1"></div>
      <div class="effect2_child2">
        Hello!!
      </div>
      <div class="effect2_child3">
        <a href="" style="color:#fff;">Click!!</a>
      </div>
      <div class="effect2_child4"><!-- 黒い背景 --></div>
    </div>
    
  </body>
</html>

実行結果：マウスを重ねると、文字が下から上へ浮かび上がります。


hover の後ろにクラス名を付けて、hover 時の子要素の属性を変更しています。
.effect2:hover .effect2_child2 { }
.effect2:hover .effect2_child3 { }
.effect2:hover .effect2_child4 { }

要素を複数にして、透過の比率や top を変更しているだけで、
基本的には１つ目のサンプルと同じです。

Tag

New Article