【WordPress】画像に動きをつける。マウスオーバーでふわっとさせる。

画像に動きをつける。マウスオーバーでふわっとさせる。

🔧 HTML構造例

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

• <a>タグで画像を包むことで、リンクとしても使え、マウス検出がしやすくなる。

• hover-rise は任意のクラス名。

🎨 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);       /* 少し拡大も入れるとよりアニメーション効果が際立つ */
}

動作イメージ

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

📚 応用カスタマイズ例

🎯 実装のヒント

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