ホバーで 2 枚目画像へ切替

解説

商品サムネイルにマウスを乗せると、別アングルの2枚目の写真へ切り替わる EC で定番の演出です。CSS のみで動き、JavaScript は不要です。仕組みは、同じ位置に2枚の画像を重ね、2枚目を最初 opacity: 0 で隠しておき、ホバー時に1枚目を消して2枚目を表示する、という不透明度の入れ替えです。transition を効かせているため、パッと切り替わるのではなく、ふわっと溶けるように変わります。

役立つ場面

• ネットショップの商品一覧で、正面と着用イメージなど2枚を見せたいとき
• メニューや作品一覧で、通常時と詳細・別カットを切り替えたいとき

切り替えの速さは transition の秒数で調整できます。2枚の画像は縦横比を揃えておくと、入れ替わりがきれいに見えます。注意点として、タッチ端末ではホバーが起きないため2枚目が表示されません。スマートフォンを重視する場合は、2枚目をスライドの一枚として並べる、タップで切り替えるなどの方法を併用すると親切です。両方の画像に意味のある alt を入れておくこともおすすめします。

使用例・適したシーン

• ナビゲーションのインタラクティブ装飾
• ギャラリーのホバーリビール
• サービスカードの強調