<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

9月
1
全日 秋季特別展MIHO MUSEUMコレクショ... @ MIHO MUSEUM
秋季特別展MIHO MUSEUMコレクショ... @ MIHO MUSEUM
9月 1 – 12月 13 全日
秋季特別展MIHO MUSEUMコレクションの形成-日本絵画を中心に- @ MIHO MUSEUM
<期間> 9月1日(火)~12月13日(日)10:00~16:00(入館は15:00まで) 月曜休館 ※9月21日(祝・月)、11月23日(祝・月)は開館、9月23日(水)、11月24日(火)は休館 <場所> MIHO MUSEUM 入館には事前予約が必要です。 詳しくはこちら→http://www.miho.or.jp/

LOCAL LINK

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