[ 質問者返信待ち ] マウスオーバーで画像を切り替えたい

お世話になっております。ベクトルスタッフの松田と申します。
プラグインを利用してマウスオーバーで画像切り替えする方法は思いつきませんが、ブロックを組み合わせてマウスオーバーで画像を切り替える方法として、以下をお試しいただけたら幸いです。

1. 画像ブロックで2枚の画像を用意
2. 画像ブロックの [設定] > [アスペクト比] を揃える(画像1枚目参照)
3. 2枚の画像をグループブロックで囲む(画像2枚目参照)
4. グループブロックのカスタムCSSに以下をコピペ(画像3枚目参照)

selector {
  position: relative;
}

selector > .wp-block-image:first-of-type,
selector > .wp-block-image:last-of-type {
  transition: .1s;
}

selector:hover .wp-block-image:first-of-type {
  opacity: 0;
}

selector .wp-block-image:last-of-type {
  opacity: 0;
  position: absolute;
  top: 0;
  margin-block-start: unset !important;
}

selector:hover .wp-block-image:last-of-type {
  opacity: 1;
}

/* 管理画面用 */
selector.block-editor-block-list__block {
  position: unset;
}

selector.block-editor-block-list__block .wp-block-image {
  opacity: 1 !important;
}

5. 1〜4までの状態でプレビューすると、画像4枚目のようにオンマウスで切り替わると思われます。(gif動画ですが動かなかったらすみません。)
スマホの時はオンマウスの代わりに画像と画像の外側をタッチすることで切り替わるようになってます。

※上記ですが、もしご活用いただけそうでしたら、VKパターンライブラリへの追加を検討する可能性があります。

ご返信ありがとうございます。

今回のご連絡を受けて、マウスオーバー(オンマウス)で画像を切り替え用のパターンを作ってみました。

マウスオーバー(オンマウス)で画像を切り替え

こちらからお好きなものを使っていただけたら幸いです。