【CSS】ホバーで背景を徐々にぼかす

こんにちは、コンスキです。

ある要素に注目させることを目的に、背景にブラーがかかるトランジションをiPhoneやiPadでよく見かけます。

今回はあれを再現してみました。

完成形
コード
参考にさせていただいたサイト

完成形

完成形は次のようになります。
iPhoneのアプリ一覧を開いたときのやつをイメージしてください。

コード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ホバーで背景をだんだんぼやけさせる</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="bgImage">
    <div id="target"></div>
  </div>
  <a href="https://unsplash.com/photos/kKvQJ6rK6S4">Photo by Alex Shutin on Unsplash</a>
</body>
</html>

.bgImage{
  width: 1000px;
  height: 500px;
  background: url(./background.jpg); /* お好みの画像に変更してください */
  background-size: cover;
  position: relative;
  padding: 100px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bgImage:before{
  content: '';
  background: inherit;
  filter: blur(0px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  pointer-events: none;
  transition: all 0.5s ease;
}
.bgImage:hover:before {
  filter: blur(10px);
}
#target {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: aliceblue;
  pointer-events: auto;
  transition: all 0.5s ease;
  border-radius: 20%;
  opacity: 0.6;
}
#target:hover {
  width: 200px;
  height: 200px;
}
a{
  display: block;
  margin-top: 10px;
  margin-right: 230px;
  text-align: end;
}