Written by Kasumi

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だけで実装できるのでとても簡単です。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【簡単】preタグ内テキストが折り返しされない問題をCSSで解決する方法

2022.01.25
2337
WordPress プログラミング

【wordpress】先頭固定記事かどうかを判別して条件分岐する方法

2021.10.26
1219
WordPress プログラミング

【簡単】wordpressでカテゴリーの順番を変更する方法【プラグインで解決】

2022.03.26
643
HTMLCSS

【簡単CSS】複数の背景画像にパララックスを実装する方法【スマホ対応】

更新日:2022.12.31
17133