「CSSでhover時に画像を拡大させる方法」について紹介します。
ユーザーにhoverしていることを知らせるアニメーションとして使えます。
【CSS】hover時に画像を拡大させる方法
それでは実際にHTMLとCSSのコードを見ていきましょう。
HTML
<div class="box"> <img src="お好きな画像パスを入れてください" alt=""> </div>
親要素boxの中にhoverした時に拡大させたい画像を用意しました。
画像はお好きな画像パスをどうぞ。
CSS
.box {
width: 300px;
height: 250px;
margin: 0 auto;
overflow: hidden;
}
.box img {
transition-duration: .5s;
}
.box img:hover {
transform: scale(1.2);
}
◎1行目〜6行目
親要素boxに対して縦横の幅を指定。
そして「margin: 0 auto;」で中央寄せ。（見やすいようにするだけのコード）
「overflow: hidden;」を指定することで、hoverした際に画像が拡大してはみ出す部分を隠すようにします。
◎7行目〜9行目
画像が拡大する時間を「transition-duration: .5s;」で指定。
今回は.5sなので、0.5秒で拡大するようにしました。
◎10行目〜12行目
画像をhoverした際に、「transform: scale(1.2);」で拡大するようにしました。
「transform: scale'();」の括弧にはX軸とY軸の拡大させたい数値を入れましょう。
まとめ
以上が、「CSSでhover時に画像を拡大させる方法」でした。
コピペして使ってみてください。
