ホバーで浮き上がるカードUIを作る方法【HTML/CSS・サンプルコード付き】

カードUI

ホバーで浮き上がるカードUIを作る方法

ホバーで浮き上がるカードUIを作る方法を紹介します。カードUIは情報をまとめて表示する基本的なレイアウトですが、マウスホバー時に少し浮き上がる動きを加えることで、視覚的な操作性やデザイン性を向上させることができます。

このサンプルでは、HTMLとCSSのみを使ってカードUIにホバーアニメーションを追加する方法を解説します。影や位置の変化を利用することで、シンプルながらも実用的なインタラクションを実現できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーして使おう！

<!-- HTML：カードUI構造 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>ホバーで浮き上がるカードUI</title>

  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="hover-lift-card-ui_wrap">

    <article class="hover-lift-card-ui_card">

      <h3>カードタイトル</h3>

      <p>
        マウスホバーでカードが浮き上がる動きを確認できるシンプルなデモです。
        transformとbox-shadowで立体感を表現しています。
      </p>

    </article>

  </div>

</body>
</html>

コードをコピーして使おう！

<!-- HTML：カードUI -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>ホバーで浮き上がるカードUI</title>

  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="hover-lift-card-ui_wrap">

    <article class="hover-lift-card-ui_card">

      <h3>カードタイトル</h3>

      <p>
        マウスホバーでカードが浮き上がる動きを確認できるシンプルなデモです。
        transformとbox-shadowを使って立体感を表現しています。
      </p>

    </article>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルはHTMLファイルとCSSファイルの2つで構成されています。HTMLファイルにはカードUIの構造を記述し、CSSファイルではホバー時にカードが浮き上がる動きを設定しています。 

sample/
├── index.html
└── style.css

フォルダをサーバーまたはローカル環境に配置し、index.htmlをブラウザで開くと動作します。カードの内容（タイトル・説明文）はHTMLで変更でき、ホバー時の動きやデザイン（余白・枠線・移動量など）はCSSで調整できます。

コメント