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」の値はホーバー時の時間、その上の値はホーバー解除（画像からマウスが外れた時）時の時間なので、自由に変更可能です。
簡単なコードでちょっとおしゃれになりますね。
動作の原理となる基本的な仕組みは以下を参照ください。
コメントを残す