【CSS】transform ホバーで画像をフワッと浮かせる

HTML・CSS

2021.02.26

画像の周りに影をつけてカーソルをホバーしたときにフワッと浮いてるように見せるCSSカスタマイズのメモ。

完成イメージ
HTMLとCSS

完成イメージ

ホバーするとフワッと浮いてきます。

HTMLとCSS

構造はすごく単純です。

div要素の中に img が入ってるだけ。

<div class="fuwa">
  <img src="https://tarovlog.com/wp-content/uploads/2021/02/sample_image_3-1024x576.png" alt="" class="wp-image-1341" width="512" height="288"/>
</div>

CSSは下記の通り。

.fuwa {
    display: inline-block;
    transition-duration: 0.4s;/*変化の時間*/
    box-shadow: 0px 4px 15px -5px rgba(85, 85, 85, 0.75);
}
.fuwa:hover {
    transform: translateY(-6px);
    box-shadow: 0px 8px 18px -5px rgba(85, 85, 85, 0.75);
}
.fuwa img {
    vertical-align: bottom;
}

影の具合とかはお好みで調整してください。

CSSの transform のより詳しいカスタマイズは下の記事を参考にする↓

【CSS3】Transform（変形）関連のまとめ - Qiita

#はじめにこの記事は、HTMLとCSSの基礎知識がある方向けの内容です。CSS3から要素の変形が指定できる、transform（トランスフォーム）プロパティが追加されました。transform…