LoginSignup
1
0

More than 3 years have passed since last update.

@spenic635

JSなし）サムネにホバーするとメイン画像が切り替わるやつ

Last updated at Posted at 2020-02-16

サムネにホバーするとメイン部分が切り替わるあれ

名前なんて言うんでしょうね。


See the Pen
GRJZmVy by sphenisc (@sphenisc)
on CodePen.


サムネにホバーするとメイン画像が切り替わるやつ

See the Pen abONwbd by sphenisc (@sphenisc) on CodePen.

見た目だけだと分かりづらいですがplaceholder.comから画像を読み込んでいます。
サムネ用の縮小画像と拡大用を別々にできるようにしています。

～仕組み～

  • 6つのliを500×500の大きさで同じ位置に重ねて置く
  • 最初のli内のDivだけ表示、他は透明(opacity:0)にしておく
  • サムネ(span)にホバーするとそのliのDivだけ表示する
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0