【CSS】マウスホバー時に背景をぼかす方法 【backdrop-filter】

CSSでhover時に背景をぼかすテクニック

マウスホバー (マウスオーバー?) 時のアニメーションというのは様々ありますが、今回はCSSだけで背景にぼかしを入れられる方法について紹介ます。

最近は backdrop-filter を利用することで、hover時に手軽に背景をぼかすことが可能です。

基本構文

backdrop-filterは、要素の背後にある背景を加工するCSSプロパティです。

.test {  
　backdrop-filter: blur(5px);  
}

これだけで背景をブラー処理できます。ただし透明色や半透明の背景が必要です。

hover時に背景をぼかす

要素にマウスを載せたときだけ背景をぼかすには、hover と transition を組み合わせます。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

  <div class="box">
    <div class="overlay">Hover!</div>
  </div>

.box {
      position: relative;
      width: 100%;
      height: 100vh;
      background: url('https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?semt=ais_hybrid&w=740&q=80') center/cover;
      overflow: hidden;
    }
    .overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.3);
      backdrop-filter: blur(0px);
      transition: backdrop-filter 0.5s;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 2rem;
    }
    .box:hover .overlay {
      backdrop-filter: blur(10px);
    }

---

例えば、ナビゲーションメニューの背景だけぼかすときなどにも使えますね。

See the Pen Untitled by STELLAR INTER (@STELLAR-INTER) on CodePen.

背景画像 : https://www.freepik.com/

対応ブラウザ

• backdrop-filterは最新のChrome / Edge / Safari / Firefoxで対応
• 古いブラウザではフォールバックとして、背景色に透過度を加えるのが一般的

まとめ

• backdrop-filter: blur() を使えばhover時に背景を簡単にぼかせる
• モーダル、メニュー、カードのhover演出などに効果的
• 対応ブラウザを考慮して、必要に応じてフォールバックも検討する

背景のぼかしは「奥行き感」や「モダンさ」を演出するのに非常に有効です。ぜひhover演出に取り入れてみてください。