<CSS>hoverした時に画像を拡大する方法

マウスを持ってきた時にブワーっと大きくなる画像の作り方を紹介します。
下の画像にカーソルを合わせてみてください。

 
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; /*変化に掛かる時間*/
}

HTMLデータ

<div class=”expansion”>
<img src=”https://thumbs.jp/testexpansion.jpg” />
</div>

画像を内包する「.expansion」に「overflow:hidden;」を指定することで、画像拡大時のはみ出し部分を隠されるようになっています。
ぜひお試しあれ!

 
 滋賀県ランキングにほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ

EVENT

3月
21
全日 特別展「リサ・ラーソン―創作と出... @ 滋賀県立陶芸の森陶芸館
特別展「リサ・ラーソン―創作と出... @ 滋賀県立陶芸の森陶芸館
3月 21 – 5月 31 全日
特別展「リサ・ラーソン―創作と出会いをめぐる旅」 @ 滋賀県立陶芸の森陶芸館
世界的に知られた陶芸家リサ・ラーソンの選りすぐりの作品とリサの身近で感化しあったアーティストたちの作品などを展観します。

LOCAL LINK

にほんブログ村 地域生活(街) 関西ブログ 滋賀県情報へ
PAGE TOP