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

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

目次

関連記事

WordPress プログラミング

Advanced Custom Fields Pro(ACFPRO)を使いオプションページを作成する方法

2022.04.22
743
HTMLCSS プログラミング

HTML・CSSのみで開閉アコーディオンを作る【JS不要簡単】

2020.04.12
1528
HTMLCSS

【簡単】CSSで点線・破線の間隔を空ける方法

2022.10.01
232
HTMLCSS プログラミング

【簡単】aタグのテキストが改行されない問題を解決する方法

2022.01.26
3017