
ブログ記事やリンク画像などで、マウスオーバーで画像がちょっと拡大する演出ってかっこいいですよね。
マウスオーバーでの画像拡大表示は CSS で簡単に実装できます。
\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/
目次
マウスオーバーで拡大するサンプル
もともとの画像よりも大きくする見せ方、もともとの画像のサイズ内で大きくする見せ方の両方を使い分けるのが素敵です。
2通りの拡大表示サンプルです。
拡大表示方法①:マウスオーバーで画像をちょっと大きくする方法
簡単な CSS を使って実現できます。

step
1画像ブロックに クラス を指定する
WordPress で画像を張り付けたら、任意のクラス名を指定します。

- 画像を配置する
- 「追加 CSS クラス」に任意の クラス名 を設定する
step
2CSS を設定する
CSS を設定します。

- 「カスタム HTML」 ブロックを配置する
- CSS を記載する
以下の CSS を記載します。
<style>
.myImage01 img {
transition: transform .6s ease;
}
.myImage01:hover img {
transform: scale(1.1);
}
</style>
ポイントです。
- サイト全体の「追加CSS」の方に記載する場合は、<style>タグの記載は不要
- 「transition」で動きに コンマ6秒を指定する
- 「transform: scale(1.1)」でマウスオーバー時に画像を 1.1 倍に拡大する
拡大表示方法②:マウスオーバーで元画像のサイズ内で画像をちょっと大きくする方法
簡単な CSS を使って実現できます。



step
1画像ブロックに クラス を指定する
WordPress で画像を張り付けたら、任意のクラス名を指定します。

- 画像を配置する
- 「追加 CSS クラス」に任意の クラス名 を設定する
step
2CSS を設定する
CSS を設定します。

- 「カスタム HTML」 ブロックを配置する
- CSS を記載する
以下の CSS を記載します。
<style>
.myImage02 {
overflow: hidden;
}
.myImage02 img {
transition: transform .6s ease;
}
.myImage02:hover img {
transform: scale(1.1);
}
</style>
ポイントです。
- サイト全体の「追加CSS」の方に記載する場合は、<style>タグの記載は不要
- 画像ブロックのクラス( myImage02 )自体に、「overflow: hidden;」を指定し、枠外は非表示にする
まとめ:画像をマウスオーバーで(ちょっと)拡大表示する方法
マウスオーバーで画像をちょっと拡大表示する演出は、簡単な CSS で実現可能です。
素敵な演出で、素敵なサイトを作ってくださいね。
40代・50代「会社員におすすめ」の在宅でできる副業5選
40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる) | ドンドン!副業情報局
20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選
20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる) | ドンドン!副業情報局
地方がチャンスのおすすめ副業を紹介!
【2025年チャンス】地方で副業のおすすめ。在宅、快適、移住先、ノマドを紹介 | ドンドン!副業情報局
WordPress のおすすめテーマ
あなたのブログを強力にアピールし、読者を惹きつける、
魅力的なウェブサイトを手軽に作りたいですか?
そんな方に オススメのテーマが「AFFINGER」 です。
「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、
上級者でも満足できる、魅力的なウェブサイトが作れます。
ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。
\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /
Presented By Boon Boon Blog .Com
広告の設置・収入について
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。