【CSS】ホバーで画像拡大して背景が暗くなる最近流行りの動き

最近のブログでは、記事一覧のページに、画像とタイトルがあり、マウスカーソルを乗せた時に、背景が暗くなって画像が拡大するCSSのホバーアニメーションが流行っているようです。

なので、今回はマウスオーバーした時に、背景を暗くして、画像をヌルっと拡大させるコードについて紹介していきます。

今回のコード自体が、シンプルかつ簡単に実装できてしまうので、楽ちんですね！

HTML

HTMLは、至ってシンプルな構成となっています。

<div class="hover-effect">
    <a href="#">
      <img src="img-1.jpg" alt="">
    </a>
  </div>

CSS

CSSも、至ってシンプルです。

下記のコードは、真ん中寄せにしたり、デフォルトのCSSを打ち消しているだけなので、実際に使うときには不要です。

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

実際に画像のホバーエフェクトに使っているCSSは、下記の部分だけになります。

.hover-effect {
  background: #000;
  overflow: hidden;
  transition: 0.5s;
}

.hover-effect a img {
  display: block;
  width: 100%;
  transition: 0.5s;
}

.hover-effect a:hover img {
  opacity: 0.7;
  transform: scale(1.2, 1.2);
}

まとめ：画像が拡大するホバーは簡単にできる

いかがでしたか？

かなり簡単に実装できちゃうので、最近の流行りに乗ってみてはどうでしょうか？？？