メインコンテンツにスキップ
画像をホバーで切り替える方法
Saika avatar
対応者:Saika
1か月以上前に更新

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

実装方法

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

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

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

これだけで完成です!

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

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