サムネイル画像をふわっと拡大させるCSSアニメーションサンプル

2021-02-08CSS アニメーション サンプル集,CSS

サムネイルなどの画像をふわっと拡大させるCSSアニメーションのサンプルコードの紹介です。

See the Pen CSS | Enlarge image animation by yochans (@yochans) on CodePen.

画像をふわっと拡大させる

CSSで画像のドラッグを無効にするにはuser-dragプロパティにて「none」を指定します。

<div class="thumbnail-box">
	<a href="https://1-notes.com/css-pixel-stars-animation/" target="_blank" rel="noopener"><img class="brightness" src="https://1-notes.com/wp-content/uploads/2020/01/%E3%82%AD%E3%83%A9%E3%82%AD%E3%83%A9%E5%85%89%E3%82%89%E3%81%9B%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.png" /></a>
</div>
<div class="thumbnail-box">
	<a href="https://1-notes.com/css-rain-animation/" target="_blank" rel="noopener"><img class="brightness" src="https://1-notes.com/wp-content/uploads/2020/01/%E9%9B%A8%E3%81%8C%E9%99%8D%E3%82%8BCSS%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E9%9B%86.png" /></a>
</div>
<div class="thumbnail-box">
	<a href="https://1-notes.com/css-kyokujituki/" target="_blank" rel="noopener"><img class="brightness" src="https://1-notes.com/wp-content/uploads/2019/08/CSS%E3%81%A7%E4%BD%9C%E3%82%8B%E6%97%AD%E6%97%A5%E6%97%97%E3%83%BCKyokujituki%E3%83%BC.png" /></a>
</div>

.thumbnail-box{
	margin: 10px;
	background: #000;
	overflow: hidden;
}

.thumbnail-box img{
	width: 300px;
	height: 200px;
	vertical-align: top; /* 画像下の余白消し用 */
	transition: 0.5s;
}

.thumbnail-box img:hover{
	transform: scale(1.4);
}

要素にtransition-durationを指定する事でスタイル変更時にアニメーションさせ、その実行時間を指定します。

transition-duration: 0.5s;

サンプルではマウスホバー時の疑似要素にて、transformのscaleで要素のサイズを拡大させています。

transform: scale(1.4);