ホーバー時にサイト内の画像を拡大させる方法

おしゃれ～～と言われるWordPressテーマでよく使われている、画像をマウスオーバーするとニュル～～っと拡大される機能。実はそんなに難しいことしなくても実装できるのご存じですか？

例として、このページのみアイキャッチ画像がマウスオーバーで拡大するようにしていますから、サンプルとして確認ください（ちょっと極端に拡大・縮小するようにしてます）。

この動きがきれい～～！なんて観点でテーマ選びをしなくても、簡単に実装できますから、今使っているテーマのままで、まずは試してみてください。

マウスオーバー時に画像が拡大するようにする方法

条件として、以下のように、画像タグ（imgタグ）が何かの要素（下図ではdivタグ）で囲まれている構造になっている必要があります（普通のサイトであればこのようになっているはずです．．）。

まずは、外側の画像要素となっている部分を調べます。

貴サイトの拡大縮小させたい画像を右クリックして、「検証（Google Chromeブラウザの場合）」をクリックしてください。

以下のようにimgタグの上下に赤枠で囲んだようなタグが存在しているはずです。

imgタグの上下がfigureタグで囲まれてますよね。こんな感じになっていれば実装可能です。

上図のように画像タグが別のタグで囲まれていない場合には、カスタマイズする必要がありますが、カスタマイズ方法についてはケースバイケースなので割愛します

本サイトと同じTT2テーマであれば、アイキャッチ画像の部分は、

<figure class="wp-block-post-featured-image">
画像タグ
</figure>

となっているでしょう。その場合には、以下のスタイルコードをテーマのCSSへ追加すれば、本ページと同じようにマウスオーバー時にアイキャッチ画像を拡大縮小させることができます。

/*** 画像ホーバーで拡大 ***/
/*アイキャッチ画像領域の最大の高さを指定 */
.wp-block-post-featured-image{
    max-height: 400px;
}

/* はみ出た部分は表示しない */
.wp-block-post-featured-image 
 {
    overflow: hidden;
}

/* マウスが外れたら1秒かけて元に戻す */
.wp-block-post-featured-image img
{
    transition: 1s all;
}

/* マウスが重なったら1秒かけて1.2倍に画像を拡大する */
.wp-block-post-featured-image img:hover
{
    transform: scale(1.2,1.2);
    transition: 1s all;
}

あとは、ご自身のサイトに合わせて、外側の要素のCSSクラスへ変えればすぐに適用できます。

外側の要素のCSSクラスとは上記コードの「.wp-block-post-featured-image」の部分です

コードの説明

それぞれが何をしているコードかは、コード中にコメント入れてますので大丈夫かと思いますが一応．．。

まずは、最初の塊で、外側の要素の高さを限定しています（例の場合はアイキャッチ画像で幅は基本本文幅以上にならないので高さのみ指定しています）

/*アイキャッチ画像領域の最大の高さを指定 */
.wp-block-post-featured-image{
    max-height: 400px;
}

幅の指定が必要であれば以下のようにすればいいでしょう。

/*アイキャッチ画像領域の最大の高さを指定 */
.wp-block-post-featured-image{
    max-height: 400px;
    max-width: 400px;
}

要素の幅や高さが確実に決まっている場合には、「max-width」「max-height」をそれぞれ「width」「height」にすれば大丈夫です（貴サイトの状況などで適宜書き換えてください）

次の塊で、外側の要素から画像がはみ出た部分を表示しないようにします。

/* はみ出た部分は表示しない */
.wp-block-post-featured-image 
 {
    overflow: hidden;
}

これでいくら画像を拡大しても、外側の要素からはみ出た部分は表示されなくなります。

最後に、以下の塊で、マウスオーバーしたとき、マウスが外れたときの動きを作ります。

/* マウスが外れたら1秒かけて元に戻す */
.wp-block-post-featured-image img
{
    transition: 1s all;
}

/* マウスが重なったら1秒かけて1.2倍に画像を拡大する */
.wp-block-post-featured-image img:hover
{
    transform: scale(1.2,1.2);
    transition: 1s all;
}

コード中の「1s」が変化を完了させるまでの秒数、「scale(1.2,1.2)」が拡大率です

---

要は、外側の要素（CSSクラス）さえわかれば、本当に上記のような簡単なコードで画像に動きを持たせることができますから、冒頭で書いたように、この動きを見て「いいな～～」とテーマを選ぶ必要もなくなりますよ（笑）。

画像拡大時に、画像の領域が変わってしまうときは

これまで紹介した方法で画像の拡大縮小はできた！でも．．なんだか拡大縮小と共に上下（左右）に領域が拡大縮小されている．．そんな時は、以下を確認してみてください。

• 外側の要素の最大高（幅）の指定はできているか？
• 外側の要素にoverflow:hiddenを適用しているか？
• 外側の要素として指定しているCSSクラスは正しいか？