画像を二つ重ね、条件付きスタイルでホバー時のスタイルで上の画像を透明にすると、下の画像が見えます。これにより、画像が切り替わったように見えます。
上に重ねた画像の不透明度を下げることで、下の画像を見せる仕組みです。
実装方法
注意：タッチデバイスではホバー操作がないため、意図しない見え方になる場合があります。
ホバー時に表示したい画像①をページに配置します。
その上に、通常時に表示したい画像②を重ねて配置します。親画像のサイズを大きくすると配置しやすくなります。
上に重ねた画像②のサイズを、幅100%、高さ100%に設定します。
通常時に表示したい画像②を選択します。
レイヤーパネルを使用すると、画像選択を正確に行うことができます。
右パネル上部の[条件スタイル]をクリックし、メニューから[ホバー] を選択します。
[カスタム設定]ボタンをクリックします。
[外観]設定の不透明度を0に設定します。
設定後は、右パネルの [ホバー] 表示右にある[戻る] （矢印アイコン）ボタンをクリックし、通常時の設定に戻ります。
ライブプレビューで動作を確認します。
公開中のサイトを編集している場合は、公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。