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

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

Ads

関連記事

WordPress プログラミング

【簡単】Custom Post Type UI で カスタム投稿タイプのアーカイブページに親ページ(任意の固定ページ)を設定する方法

更新日:2022.04.13
394
WordPress プログラミング

【wordpress投稿】アイキャッチではなく最初の画像をサムネイルにする方法

更新日:2021.10.26
110
WordPress プログラミング

【簡単】WordPressでテーマ内のファイルURLを取得する方法

2022.04.13
75
HTMLCSS プログラミング

tableタグのtd、thに入ってる文字がスマホだとサイズがおかしくなる原因【改善】

2021.06.03
243