見出し画像

【STUDIO Tips】画像をhoverで切り替える方法

STUDIOではhoverの状態をデザインすることが可能ですが、hoverで画像を入れ替えるような挙動を再現できるの知ってましたか?

画像置き換え

実装方法

1. hoverで表示したい画像を配置する

画像2

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

画像3

3. 2の手順で設置した通常時の画像を選択し、hover状態をクリック。そして透明度を0にする。

画像4

これだけで完成です!🎉


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

ぜひお試しを!



この記事が気に入ったらサポートをしてみませんか?