この記事にはプロモーションが含まれています。

【コピペOK】カード・アイテム系アニメーション完全ガイド｜5種類【HTML】

2025-07-18

ケケンタ

カードにホバー効果を実装したい……

ケケンタ

商品アイテムをより魅力的にしたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において人気の高いアニメーション効果
カード・アイテム系アニメーション

をご紹介します。

5種類のカード・アイテム系アニメーションを完全網羅した実装なので、いままさに「カードのホバー効果を実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するカード・アイテム系アニメーション

リフト（要素が浮き上がる）
ティルト（3D傾斜効果）
フリップ（カードが裏返る）
ズーム（画像の拡大）
オーバーレイ（情報オーバーレイの表示）

ケケンタ

特に商品カードやポートフォリオアイテムには、ホバー効果が非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです！

なお、今回ご紹介するアニメーションはほとんどがCSSのみで実装可能なため、どなたでも安心してご活用いただけます！

あわせて読みたい

【コピペOK】ハンバーガーメニューのスライドアニメーション完全ガイド｜5種類

【コピペOK】文字が１つずつ表示！タイプライターの実装【HTML/CSS】

【コピペOK】背景アニメーション完全ガイド｜5種類【HTML】

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

カード・アイテム系アニメーションとは

カード・アイテム系アニメーションは、カードやアイテム要素にホバー効果を適用することで、ユーザーの注目を集め、インタラクティブな体験を提供するアニメーション効果です。視覚的な魅力とユーザビリティの向上を同時に実現する効果的な手法です。

効果的な使用場面

適している場面

商品カード
ポートフォリオアイテム
ブログ記事カード
サービス紹介カード
ギャラリーアイテム

避けるべき場面

重要な情報の表示部分
頻繁にクリックされる要素（過度なアニメーション）
アクセシビリティを重視する場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
リフト	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ティルト	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
フリップ	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
ズーム	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
オーバーレイ	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

リフト

① デモ

See the Pen 【カード・アイテム】リフト by ケケンタ (@lgshifbg-the-looper) on CodePen.

このリフト効果の特徴

要素が浮き上がる効果
影の変化で立体感を演出
スムーズな上昇アニメーション
高級感のある演出

② HTML

<div class="card-lift">
    <img src="https://picsum.photos/300/200?random=1" alt="カード画像">
    <div class="card-content">
        <h3>カードタイトル</h3>
        <p>カードの説明文がここに入ります。</p>
    </div>
</div>

③ CSS

.card-lift {
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.card-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.card-lift img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.card-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

④ カスタマイズ例

/* 大きなリフト効果 */
.card-lift-large:hover {
    transform: translateY(-20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* 小さなリフト効果 */
.card-lift-small:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* リフト + スケール */
.card-lift-scale:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

ティルト

① デモ

See the Pen 【カード・アイテム】ティルト by ケケンタ (@lgshifbg-the-looper) on CodePen.

このティルト効果の特徴

3D傾斜効果
マウス位置に応じた動的な変化
リアルな立体感
高度なインタラクション

② HTML

<div class="card-tilt" id="tiltCard">
    <img src="https://picsum.photos/300/200?random=2" alt="カード画像">
    <div class="card-content">
        <h3>カードタイトル</h3>
        <p>カードの説明文がここに入ります。</p>
    </div>
</div>

③ CSS

.card-tilt {
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.1s ease;
    cursor: pointer;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card-tilt img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.card-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

④ JavaScript

document.getElementById('tiltCard').addEventListener('mousemove', function(e) {
    const card = this;
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    const rotateX = (y - centerY) / 10;
    const rotateY = (centerX - x) / 10;

    card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.05, 1.05, 1.05)`;
});

document.getElementById('tiltCard').addEventListener('mouseleave', function() {
    this.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)';
});

⑤ カスタマイズ例

/* より大きなティルト効果 */
.card-tilt-large {
    transition: transform 0.05s ease;
}

/* ティルト + リフト */
.card-tilt-lift:hover {
    transform: translateY(-5px) perspective(1000px) rotateX(5deg) rotateY(5deg);
}

フリップ

① デモ

See the Pen 【カード・アイテム】フリップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフリップ効果の特徴

カードが裏返る効果
表と裏の情報を表示
3D回転アニメーション
情報量の増加

② HTML

<div class="card-flip">
    <div class="card-inner">
        <div class="card-front">
            <img src="https://picsum.photos/300/200?random=3" alt="カード画像">
            <div class="card-content">
                <h3>カードタイトル</h3>
                <p>ホバーで詳細を表示</p>
            </div>
        </div>
        <div class="card-back">
            <div class="card-content">
                <h3>詳細情報</h3>
                <p>カードの詳細な説明文がここに入ります。より多くの情報を表示できます。</p>
                <button class="btn">詳細を見る</button>
            </div>
        </div>
    </div>
</div>

③ CSS

.card-flip {
    width: 300px;
    height: 300px;
    perspective: 1000px;
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card-flip:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: white;
    overflow: hidden;
}

.card-back {
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-front img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.card-content p {
    margin: 0 0 15px 0;
    color: #666;
    line-height: 1.5;
}

.btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

④ カスタマイズ例

/* 水平フリップ */
.card-flip-horizontal:hover .card-inner {
    transform: rotateY(180deg);
}

/* 垂直フリップ */
.card-flip-vertical:hover .card-inner {
    transform: rotateX(180deg);
}

/* スローフリップ */
.card-flip-slow .card-inner {
    transition: transform 1s;
}

ズーム

① デモ

See the Pen 【カード・アイテム】ズーム by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズーム効果の特徴

画像の拡大効果
スムーズな拡大アニメーション
オーバーフローの制御
視覚的な注目効果

② HTML

<div class="card-zoom">
    <div class="image-container">
        <img src="https://picsum.photos/300/200?random=4" alt="カード画像">
    </div>
    <div class="card-content">
        <h3>カードタイトル</h3>
        <p>カードの説明文がここに入ります。</p>
    </div>
</div>

③ CSS

.card-zoom {
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
}

.image-container {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.card-zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.card-zoom:hover img {
    transform: scale(1.1);
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.card-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

④ カスタマイズ例

/* 大きなズーム効果 */
.card-zoom-large:hover img {
    transform: scale(1.2);
}

/* 小さなズーム効果 */
.card-zoom-small:hover img {
    transform: scale(1.05);
}

/* ズーム + フェード */
.card-zoom-fade img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.card-zoom-fade:hover img {
    transform: scale(1.1);
    opacity: 0.8;
}

オーバーレイ

① デモ

See the Pen 【カード・アイテム】オーバーレイ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このオーバーレイ効果の特徴

情報オーバーレイの表示
フェードインアニメーション
追加情報の表示
視覚的な階層構造

② HTML

<div class="card-overlay">
    <img src="https://picsum.photos/300/200?random=5" alt="カード画像">
    <div class="overlay">
        <div class="overlay-content">
            <h3>詳細情報</h3>
            <p>カードの詳細な説明文がここに入ります。</p>
            <button class="btn">詳細を見る</button>
        </div>
    </div>
    <div class="card-content">
        <h3>カードタイトル</h3>
        <p>カードの説明文がここに入ります。</p>
    </div>
</div>

③ CSS

.card-overlay {
    width: 300px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.card-overlay img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-overlay:hover .overlay {
    opacity: 1;
}

.overlay-content {
    text-align: center;
    color: white;
    padding: 20px;
}

.overlay-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.overlay-content p {
    margin: 0 0 15px 0;
    line-height: 1.5;
}

.btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #333;
}

.card-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}

④ カスタマイズ例

/* スライドアップオーバーレイ */
.overlay-slide {
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.card-overlay:hover .overlay-slide {
    opacity: 1;
    transform: translateY(0);
}

/* スケールオーバーレイ */
.overlay-scale {
    transform: scale(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.card-overlay:hover .overlay-scale {
    opacity: 1;
    transform: scale(1);
}

/* グラデーションオーバーレイ */
.overlay-gradient {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
}