CSSだけでhover（ホバー）したら画像を拡大させる方法【jQuery不要】
CSSを使ってhover(ホバー)したら画像を拡大させたい。
この様な悩みを解決いたします。
本記事ではjQueryを使わず、CSSだけでhover(ホバー)したら画像を拡大させる方法について解説いたします。
サンプルコード
See the Pen
hover画像拡大 by Kohei (@kouk05)
on CodePen.0
サンプルコードです。
サンプル画像枠をhover(ホバー)したらふわっと拡大されてます。
詳細は次章より説明します。
CSS
.box {
width: 200px;
height: 200px;
background-image: url(https://placehold.jp/18/cccccc/0000ff/300×300.png?text=サンプル画像);
background-size: cover;
background-repeat: no-repeat;
}
hoverで画像を拡大したいときはimgタグではなく空タグを用意し、そのタグに背景画像を上記のように設定しましょう。
width、height、background-imageは画像に合わせ任意の値を入れます。
.box {
transition: all 0.3s ease-out;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
transition: all 0.3s ease-out;
}
あとはtransformプロパティを使い、通常時、hover時でscaleの値を任意の拡大比率に設定するだけでOKです。
transformだけだと動きにカタつきがでるので、transitionでアニメーションを設定すれば完成です。
まとめ
jQueryを使わず、cssだけで実装できるのでとても簡単です。
以上で解説を終わります。
目次
