【CSS】コピペでOK！hoverで画像を拡大表示するエフェクトの実装方法

CSSだけで、リンクをホバーすると画像が拡大されるエフェクトの実装方法をご紹介します。
このブログでも利用しているエフェクトです。
まずはデモをご覧ください。

この動きがたったの3行で実装できるので、そのやり方をご紹介します。

画像拡大エフェクト

HTML

<a href="#">
	<figure><img src="dummy.jpg" alt=""></figure>
</a>

CSS

figure {
	overflow: hidden;
}
figure img {
	transition: .3s;
}
a:hover figure img {
	transform: scale(1.05);
}

デモ

画像拡大エフェクト + オーバーレイ

拡大だけだと少し味気ないので、冒頭で紹介したような、カラーオーバーレイもかけてみます。
色をつけるには、疑似要素の「::before」を使用します。

HTML

HTMLはまったく同じです。

<a href="#">
	<figure><img src="dummy.jpg" alt=""></figure>
</a>

CSS

figure {
	overflow: hidden;
	position: relative;
}
figure::before {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	transition: .3s;
}
figure img {
	transition: .3s;
}
a:hover figure::before {
	background: rgba(0,0,0,.5);
}
a:hover figure img {
	transform: scale(1.05);
}

figureに「position: relative;」を忘れると崩れてしまうので必ず指定しましょう。

デモ

まとめ

これだけでサイトがおしゃれに見えますよね。
実はこんなに簡単に実装できるんです。
サイトに動きをつけることでおしゃれに見せられるだけでなく、ユーザーを引き付ける効果も期待できるので、実装してみてください。