お知らせ/ブログ
ホバー時に画像を拡大させたい時ってありますよね。
結構好きなアクションでよく実装します。
HTML+CSSで作成した際の制作メモです。
ホバー時に画像拡大
HTML
<div class="zoom-box"><a href="#"><img src="画像" /></a></div>
CSS
.zoom-box{
overflow: hidden;
}
.zoom-box a img{
transition: all 0.3s;
}
.zoom-box a:hover img{
transform: scale(1.1);
}
画像の親要素に「overflow: hidden;」を入れないとはみ出てしまいます。
今回は枠内に収めたかったので記述を入れています。
aタグに入れても効かないので、aタグの外か内をdivタグで囲んで記述を追加するのがよさそうかなと思います。
spanタグでもいいかも。
「transition: all 0.3s;」で変化するスピードを設定。
「transform: scale(1.1);」で拡大する大きさを設定しています。
scale(1.1)で1.1倍になります。
記述の際「a img:hover」でも「a:hover img」でも大丈夫そうなのですが
親要素にホバーの記述がある方が確実かなと思うので「a:hover img」推奨。