クエリーループブロック内のアイキャッチ画像をマウスオーバーでちょっと拡大させる方法

WordPressの投稿などをさまざまな切り口で簡単に一覧化できる「クエリーループ」ブロック。

一覧に表示されるアイキャッチ画像をマウスオーバーした時にヌルっと拡大されるようにするスタイルコードをいつも忘れてしまうのでメモとして公開しておきます。

百聞は一見に如かず、以下のような感じになります。

テーマのstyle.cssへ以下を追加するだけです。

/***** クエリーループの画像をホーバー時に拡大 *****/
.wp-block-query figure.wp-block-post-featured-image{
	overflow: hidden;
}

.wp-block-query img{
	transition: 1s all;
}

.wp-block-query img:hover{
	transform: scale(1.2,1.2);
	transition: 1s all;
}

冒頭の「.wp-block-query」でクエリーループだけに限定していますが、さらに特定のクエリーループブロックだけに限定したいのであれば、クエリーループブロックへ追加CSSクラスを追加して、「.wp-block-query」の代わりに指定すれば動作します。

拡大率は「transform」で指定（上記コード例では縦横に1.2倍）しているので自由に変更できますし、拡大する時間も「transition」で指定（上記コードでは1秒）していて、「hover」の値はホーバー時の時間、その上の値はホーバー解除（画像からマウスが外れた時）時の時間なので、自由に変更可能です。

簡単なコードでちょっとおしゃれになりますね。

動作の原理となる基本的な仕組みは以下を参照ください。

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