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 プログラミング

【簡単】html・cssを使ってtable(テーブル)タグを角丸にする方法

2022.02.15
1641
WordPress プログラミング

ワードプレスの管理画面をアクセス制限(IP制限)してセキュリティを強化しよう

2021.03.01
1657
WordPress プログラミング

【プラグイン不要】WordPress・PHPサイトでCSS・JS・画像ファイルのキャッシュを常に自動削除する方法【簡単】

2022.04.09
1761
PHP プログラミング

Use of undefined constant campaign – assumed ‘文字列'(this will throw an Error in a future version of PHP) inエラーがでる場合の対処方法

2022.01.29
1377