最近のブログでは、記事一覧のページに、画像とタイトルがあり、マウスカーソルを乗せた時に、背景が暗くなって画像が拡大する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);
}
まとめ:画像が拡大するホバーは簡単にできる
いかがでしたか?
かなり簡単に実装できちゃうので、最近の流行りに乗ってみてはどうでしょうか???