画像にマウスを乗せたときに「浮き上がる」ような視覚効果をつけるCSS

画像が画像にマウスを乗せたときに「浮き上がる」ような視覚効果、ようするにアニメーションだな。

結果はこちら。これをプラグインを使わずにやります。

まずはCSS。追加CSSに以下をコピーしてペースト

.hover-rise {
  display: inline-block;         /* 画像サイズに合わせてボックス化 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* スムーズな動きにする */
}

.hover-rise img {
  display: block;                /* 余白削減のため */
  max-width: 100%;               /* レスポンシブ対応 */
  height: auto;
  transition: transform 0.3s ease;
}

.hover-rise:hover {
  transform: translateY(-8px);  /* 上に浮かせる */
  box-shadow: 0 12px 20px rgba(0,0,0,0.15); /* 浮遊感を演出 */
}

.hover-rise:hover img {
  transform: scale(1.03);       /* 少し拡大も入れるとよりアニメーション効果が際立つ */
}

あとは画像を挿入して、ブロックの追加CSSに hover-rise を記述すればOK。　

HTMLはこちら。画像をカスタムHTMLブロックで挿入する時はこちらになります。

<a href="#" class="hover-rise">
  <img src="example.jpg" alt="サンプル画像">
</a>

• <a>タグで画像を包むことで、リンクとしても使えますし、マウス検出がしやすくなります。
• hover-rise は任意のクラス名ですので、好みで変えてください。

✨ 動作イメージ

• .hover-rise にホバーすると、 translateY(-8px) で 8px 上に移動。
• box-shadow を加えて奥行きを表現。
• さらに内側の画像自体にも scale(1.03) を適用し、少し拡大 ⇒ 浮き上がる印象。

---

📚 応用カスタマイズ例

項目	内容
アニメーション速度	0.3s → 0.2s（速め） / 0.4s（ゆったり）
浮かせる距離	translateY(-8px) → -5px（控えめ） / -12px（強め）
拡大率	scale(1.03) → 1.05（大きく） / 1.02（微小）
シャドウ	rgba(0,0,0,0.15) → rgba(0,0,0,0.25)（濃い影）

🎯 実装のヒント

• <img> に border-radius: 8px; を追加すれば、角丸＆浮き演出の相性バツグンです。
• レスポンシブ対応には、.hover-rise img { width: 100%; } の設定があると便利。
• box-shadow を .hover-rise ではなく .hover-rise img にかけてもOKです。使いたい範囲に応じて調整を。