大阪から日本全国のご依頼に対応。WEBサイト制作ならアトリエ涼。

お知らせ/ブログ

※当サイトは、アフェリエイト広告を利用しています。

2023.11.17

制作メモ

【CSS】ホバー時に画像を拡大させる方法

【CSS】ホバー時に画像を拡大させる方法

ホバー時に画像を拡大させたい時ってありますよね。
結構好きなアクションでよく実装します。
HTML+CSSで作成した際の制作メモです。

【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」推奨。