【WordPress】画像をマウスオーバーで（ちょっと）拡大表示する方法

---

---

ブログ記事やリンク画像などで、マウスオーバーで画像がちょっと拡大する演出ってかっこいいですよね。

マウスオーバーでの画像拡大表示は CSS で簡単に実装できます。

「アフィリエイトの始め方とブログの作り方を完全解説！」はこちら

マウスオーバーで拡大するサンプル

もともとの画像よりも大きくする見せ方、もともとの画像のサイズ内で大きくする見せ方の両方を使い分けるのが素敵です。

２通りの拡大表示サンプルです。

拡大表示方法①：マウスオーバーで画像をちょっと大きくする方法

簡単な CSS を使って実現できます。

step
1画像ブロックに クラス を指定する

WordPress で画像を張り付けたら、任意のクラス名を指定します。

step
2CSS を設定する

CSS を設定します。

以下の CSS を記載します。

<style>
.myImage01 img {
    transition: transform .6s ease;
}

.myImage01:hover img {
    transform: scale(1.1);
}
</style>

ポイントです。

拡大表示方法②：マウスオーバーで元画像のサイズ内で画像をちょっと大きくする方法

簡単な CSS を使って実現できます。

step
1画像ブロックに クラス を指定する

WordPress で画像を張り付けたら、任意のクラス名を指定します。

step
2CSS を設定する

CSS を設定します。

以下の CSS を記載します。

<style>
.myImage02 {
    overflow: hidden;
}

.myImage02 img {
    transition: transform .6s ease;
}

.myImage02:hover img {
    transform: scale(1.1);
}
</style>

ポイントです。

まとめ：画像をマウスオーバーで（ちょっと）拡大表示する方法

マウスオーバーで画像をちょっと拡大表示する演出は、簡単な CSS で実現可能です。

素敵な演出で、素敵なサイトを作ってくださいね。

WordPress の情報、テクニック一覧はこちらをクリック！

Presented By Boon Boon Blog .Com

電気通信事業法改正に伴う表記