メインコンテンツにスキップ

【旧エディタ】ホバー時に画像を切り替える方法

アニメーションで、画像を入れ替えるような挙動を再現することが可能です。

今日アップデートされました

ℹ️ 2025年11月25日にリリースした「Editor 5.0」では、メニュー配置や操作手順が異なる場合があります。

Studioではホバーの状態をデザインすることが可能ですが、hoverで画像を入れ替えるような挙動を再現することもできます。

実装方法

1. ホバーで表示したい画像を配置する

2. その上に通常時に表示したい画像を重ねて配置。重ねて配置した画像のwidthとheightは100%にしましょう。(重ねて配置する場合は、まずは親画像のサイズを大きくして、入れやすくしましょう)

3. 2の手順で設置した通常時の画像を選択し、条件付きスタイル「ホバー」の編集モードで、不透明度を0に。

これだけで完成です!

ライブプレビューで確認してみると、画像にカーソルを合わせると画像が切り替わったかのような挙動になります!

こちらの回答で解決しましたか?