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

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

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

<br /> See the Pen <a href="https://codepen.io/investment4057/pen/pojwLpK" class="broken_link">pojwLpK</a> by investment4057<br /> (<a href="https://codepen.io/investment4057" class="broken_link">@investment4057</a>) on <a href="https://codepen.io" class="broken_link">CodePen</a>.

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

HTML
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);
}