Zenn
🗻

マウスホバーでぼかしを入れるには

2024/05/11に公開
CSS
HTML
tech

概要

ある要素をマウスホバーすると，そのコンテンツにはぼかしが入って，その上にさらに説明テキストや詳細ページへの誘導リンクボタンがふわっと表示されるようにしたいことがあります。

上の画像のような感じです。左画像はマウスホバーする前，右画像はホバーした時の表示。

どのように実装しますか？

ポイントは3つ

  • どのような構造にするか
  • hoverをどの要素に対して機能させるか
  • ぼかしを入れるためのCSS設定は？

どのような構造にするか

構造

ここでのポイントは，下層レイヤーとカバーレイヤーを同じ位置に同じ大きさで配置するということです。構造としては

- 外包レイヤー（2つの要素をラップするレイヤー）blur-wrapper
    - 下層レイヤー blur-contents
    - カバーレイヤー cover-contents

「下層レイヤー」と「カバーレイヤー」を，「外包レイヤー」を親とする兄弟要素になっています。親要素に対して同じ関係にするということです。

HTMLに書き起こすと

index.html
<div class="blur-wrapper">
  <div class=blur-contents>
    <h1>マウスホバーでぼかしを入れる</h1>
    <p>これは下層レイヤーの本文テキストです。これは下層レイヤーの本文テキストです。これは下層レイヤーの本文テキストです。これは下層レイヤーの本文テキストです。</p>
  </div>
  <div class="cover-contents">
    <p>これはカバーレイヤーの本文テキストです。これはカバーレイヤーの本文テキストです。</p>
    <a class="btn">誘導リンクボタン</a>
  </div>
</div>

体裁を整える

style.css
.blur-wrapper {
  width: 400px;
  max-width: 90vw;
  position: relative; /* 外包レイヤーを位置の基準にする */

  .blur-contents { /* 下層レイヤーの位置の指定は不要 */
    border: solid 1px #999;
    padding: 1.5rem;
  }

  .cover-contents {
    position: absolute; /* 外包レイヤーに対して */
    top: 0; /* 上端と */
    left: 0; /* 左端を基準に */
    width: 100%; /* 幅を100%，つまり下層レイヤーと同じ幅 */
    height: 100%; /* 高さを100%，つまり下層レイヤーと同じ高さ */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0; /* 初期表示で透過度は0，つまり見えないけどある */
    transition: opacity 0.3s ease;
    p {
      margin: 1.5rem;
      color: #FFF;
      text-align: left;
    }
  }

  &:hover .cover-contents { /* カバーレイヤーをホバーすると */
    opacity: 1; /* 透過度は1，つまり表示される */
  }
  
  .btn {
    display: inline-block;
    margin: 10px auto 1.5rem;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s ease;
    cursor: pointer;

    &:hover {
      background-color: #0056b3;
    }
  }
}

ぼかしを入れるためのCSS設定は？

ぼかしを入れるためのCSSプロパティは

filter: blur(3px);

こんな感じです。
テキストも画像もいい感じでぼかしてくれます。
CSSの疑似要素 :hover を指定した要素に上記のプロパティを追加すればいいのですが・・・

どの要素に :hover を指定するかが肝

ぼかしを施したい要素は '.blur-contents' なので次のようにしたくなります。

style.css
.blur-contents:hover {
  filter: blur(3px);
}

この場合，ホバーできるのは外包レイヤー .blur-wrapper です。そこに疑似要素 :hover を指定してCSSを設定します。次のような感じです。

style.css
.blur-wrapper:hover .blur-contents {
  filter: blur(3px);
}

hoverした子要素にblurを設定すると思うように動作してくれます。

まとめ

  • 構造は，外包レイヤーを設けて，下層レイヤーとカバーレイヤーを兄弟関係にする。
  • ぼかしのためのプロパティは， filter: blur(3px)
  • どの要素に :hover を指定するか：外包レイヤー

Discussion