【HTML/CSS】JavaScript 無しで画像をロールオーバーアニメーションさせるときのコツ

In9anKsuUdJhv2FY

  • off / on 画像を絶対配置で重ねる
  • :hover は画像をネストする親要素に指定
  • :hover で z-index を逆転させる
  • opacity で滑らかに切り替えてるように見せる
  • PC / タッチデバイス それぞれのコードが必要かも(後述)

 

要点とコード

code
共通HTML

 

共通SCSS / フェード

 

一回転

 

縦回転

 

横回転

 

面倒な点

bug

親要素の高さをピクセル固定して画像を絶対配置させるため、高さが成り行きで変化せず、レスポンシブ対応が困難。

従って、レスポンシブサイトで使う場合には、PC用 / タッチデバイス用 それぞれのhtmlとcssを書き、メディエクエリかブレークポイントで表示を切り替えるのがベター。

    • このエントリーをはてなブックマークに追加