マウスを持ってきた時にブワーっと大きくなる画像の作り方を紹介します。
下の画像にカーソルを合わせてみてください。
CSSデータ
.expansion {
overflow: hidden; /*拡大時にはみ出た部分を隠す*/
width: 500px; /*画像の幅*/
height: 100px; /*画像の高さ*/
}
.expansion img {
display: block;
transition-duration: 0.3s; /*変化に掛かる時間*/
}
.expansion img:hover {
transform: scale(1.1); /*画像の拡大率*/
transition-duration: 0.3s; /*変化に掛かる時間*/
}
overflow: hidden; /*拡大時にはみ出た部分を隠す*/
width: 500px; /*画像の幅*/
height: 100px; /*画像の高さ*/
}
.expansion img {
display: block;
transition-duration: 0.3s; /*変化に掛かる時間*/
}
.expansion img:hover {
transform: scale(1.1); /*画像の拡大率*/
transition-duration: 0.3s; /*変化に掛かる時間*/
}
HTMLデータ
<div class=”expansion”>
<img src=”https://thumbs.jp/testexpansion.jpg” />
</div>
<img src=”https://thumbs.jp/testexpansion.jpg” />
</div>
画像を内包する「.expansion」に「overflow:hidden;」を指定することで、画像拡大時のはみ出し部分を隠されるようになっています。
ぜひお試しあれ！
PAGE TOP