画像付きカードデザイン22選

カードデザインって、画像を入れるとグッと見栄えが良くなりますよね。どんなパターンがあるんですか？

そうだね。画像付きカードはWebサイトでよく使われるUIパターンだよ。今回は22種類のデザインを紹介するね。基本的なレイアウトから、ホバーエフェクト、3D回転まで幅広く見ていこう。

ホバーで動くカードとか、おしゃれなサイトでよく見ます。

それぞれのコードをコピーしてカスタマイズできるから、自分のサイトに合わせて使ってみてね。

画像・テキストを水平方向に配置したCSSカードデザイン

「box-shadow」で影を入れカードを浮かせたようにしています

HTML

<a href="#" class="card" target="_blank">
    <img class="card-image" src="https://cdn.pixabay.com/photo/2020/10/21/18/07/laptop-5673901_640.jpg">
    <div class="card-box">
        <h2 class="card-title">カードタイトル</h2>
        <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
    </div>
</a>

CSS

.card {
    display: flex;
    align-items: center;
    padding: 1rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 10px 20px #ccc;
    transition: 0.5s;
    width: 600px;
    color: #333;
    text-decoration: none;
}

.card-image {
    flex-basis: 240px;
    height: 100px;
    object-fit: contain;
}

.card-box {
    padding-left: 1rem;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.card:hover {
    box-shadow: 0 5px 10px #ccc;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

aタグを使用して、画像とテキストを水平方向に並べたカードを作成してください。

### 初期状態
- 白い背景
- 左側に画像、右側にタイトルと説明文
- 柔らかい影でカードを浮かせたデザイン
- 適度な角丸

### ホバー時
- 影が小さくなり、カードが押し込まれたような印象に

このカードの特徴

水平レイアウト Flexboxで画像とテキストを横並びに配置
リンクカード a要素で全体をクリック可能に
浮遊感のあるデザイン box-shadowで立体感を表現
ホバーフィードバック 影の変化でクリック可能であることを示す

コードのポイント

Flexboxによる水平配置:

.card {
    display: flex;
    align-items: center; /* 縦方向中央揃え */
}

.card-image {
    flex-basis: 240px; /* 画像の幅を固定 */
}

display: flexで子要素を横並びに
align-items: centerで縦方向の中央揃え
flex-basisで画像の幅を固定し、残りをテキストに

ホバー時の影の変化:

.card {
    box-shadow: 0 10px 20px #ccc; /* 初期状態 */
    transition: 0.5s;
}

.card:hover {
    box-shadow: 0 5px 10px #ccc; /* 影が小さくなる */
}

ホバーで影のサイズを小さくし、押し込み効果を表現

影を入れたシンプルなCSSカードデザイン

「box-shadow」で影を入れカードを浮かせたようにしています

HTML

<div class="wrapper">
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683_640.png">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683_640.png">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2016/05/24/16/48/mountains-1412683_640.png">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
    </div>

CSS

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 10px 20px #ccc;
    color: #333;
    text-decoration: none;
    transition: 0.5s;
}

.card-image {
    width: 100%;
    object-fit: contain;
}

.card-box {
    padding: 1rem;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.card:hover {
    box-shadow: 0 10px 20px #999;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

aタグを使用して、縦方向に画像とテキストを並べたカードを作成してください。

### 初期状態
- 白い背景
- 上に画像、下にタイトルと説明文
- 柔らかい影でカードを浮かせたデザイン
- 適度な角丸
- 複数カードを横並びで配置

### ホバー時
- 影が濃くなり、カードが浮き上がったような印象に

このカードの特徴

縦型レイアウト 画像の下にテキストを配置する王道パターン
複数カード対応 Flexboxで横並びに複数カードを配置
レスポンシブ flex-wrapで画面幅に応じて折り返し
ホバーで強調 影が濃くなることで注目を集める

コードのポイント

複数カードの配置:

.wrapper {
    display: flex;
    flex-wrap: wrap; /* 折り返しを有効化 */
    justify-content: center;
    gap: 1rem; /* カード間の余白 */
}

.card {
    flex-basis: 240px; /* カードの幅を固定 */
}

flex-wrap: wrapで画面幅に応じて折り返し
gapでカード間のスペースを統一

ホバー時の影の強調:

.card {
    box-shadow: 0 10px 20px #ccc; /* 薄い影 */
}

.card:hover {
    box-shadow: 0 10px 20px #999; /* 濃い影 */
}

影の色を濃くしてホバー状態を表現

境界線を入れたシンプルなCSSカードデザイン

ホバー時「box-shadow」で影を入れカードを浮かせたようにしています

HTML

<div class="wrapper">
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2020/03/03/20/31/boat-4899802_640.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2020/03/03/20/31/boat-4899802_640.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2020/03/03/20/31/boat-4899802_640.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
    </div>

CSS

.wrapper {
    display: flex;
    justify-content:center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    padding: 1rem;
    word-wrap: break-word;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 0.25rem;
    border: 1px solid #cdcdcd;
    color: #333;
    text-decoration: none;
    transition: 0.5s;
}

.card-image {
    width: 100%;
    object-fit: contain;
}

.card-box {
    padding: 1rem 0;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.card:hover {
    box-shadow: 0 10px 20px #999;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

aタグを使用して、境界線で囲まれたシンプルなカードを作成してください。

### 初期状態
- 白い背景
- グレーの細い境界線
- 影なしのフラットなデザイン
- 内側に余白を設けてゆとりのあるレイアウト

### ホバー時
- 影が現れてカードが浮き上がる

このカードの特徴

ボーダースタイル 影ではなく境界線でカードを区切るシンプルなデザイン
フラットな初期状態 影なしでスッキリした見た目
ホバーで立体感 初期状態はフラット、ホバーで浮き上がる変化
内側パディング カード全体に余白を設けて読みやすく

コードのポイント

ボーダーによる区切り:

.card {
    border: 1px solid #cdcdcd; /* グレーの境界線 */
    box-shadow: none; /* 初期状態は影なし */
}

borderでカードの輪郭を定義
初期状態では影を使わないフラットなデザイン

ホバーで影を追加:

.card:hover {
    box-shadow: 0 10px 20px #999;
}

ホバー時のみ影を追加して浮遊感を演出

画像を丸く切り抜いたCSSカードデザイン

「border-radius: 50%;」で画像を丸く切り抜いてます

HTML

<div class="wrapper">
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_150.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_150.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_150.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
    </div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem;
}


.card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-basis: 240px;
    word-wrap: break-word;
    background-color: #131D26;
    background-clip: border-box;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 10px 20px #ccc;
    text-decoration: none;
    transition: .5s;
}

.card-image {
    margin: 2rem;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}


.card:hover {
    box-shadow: 0 10px 20px #999;
}


.card-box {
    padding: 1rem;
    background-color: #62C69A;
    color: white;
    text-align: center;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

aタグを使用して、丸い画像を使ったプロフィール風カードを作成してください。

### 初期状態
- 暗い青色の背景
- 画像を丸く切り抜いて上部中央に配置
- 緑色のフッター部分にテキストを配置
- 柔らかい影

### ホバー時
- 影が濃くなる

このカードの特徴

丸い画像 プロフィールカードに最適な円形切り抜き
ツートンカラー 暗い上部と緑のフッターでメリハリ
中央配置 画像もテキストも中央揃えで統一感
人物紹介向け SNSプロフィールやチーム紹介に最適

コードのポイント

画像を丸く切り抜く:

.card-image {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* 完全な円形に */
    object-fit: cover; /* 画像をトリミング */
}

border-radius: 50%で正円に切り抜き
widthとheightを同じ値にして正方形を作成
object-fit: coverで画像を中央トリミング

ツートンカラーの実現:

.card {
    background-color: #131D26; /* 暗い青の上部 */
}

.card-box {
    background-color: #62C69A; /* 緑のフッター */
}

カード本体と内部要素で異なる背景色を設定

画像を半円で切り抜いたCSSカードデザイン

「clip-path」で画像を切り抜いてます。

HTML

<div class="wrapper">
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2018/01/15/07/52/woman-3083401_640.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2018/01/15/07/52/woman-3083401_640.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2018/01/15/07/52/woman-3083401_640.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
    </div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}


.card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-basis: 240px;
    word-wrap: break-word;
    background-color: #efefef;
    background-clip: border-box;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 10px 20px #ccc;
    transition: .5s;
    text-decoration: none;
    color: #333;
}

.card-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    clip-path: circle(150px at top);
}


.card:hover {
    box-shadow: 0 10px 20px #999;
}


.card-box {
    padding: 1rem;
    color: #333;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

aタグを使用して、画像を半円で切り抜いたカードを作成してください。

### 初期状態
- 薄いグレーの背景
- 画像の下部を半円形に切り抜く
- 柔らかい影

### ホバー時
- 影が濃くなる

このカードの特徴

半円切り抜き clip-pathで画像の下部を曲線に
柔らかい印象 直線ではなく曲線で優しいデザイン
シンプルな背景 薄いグレーで画像を引き立てる
ユニークな形状 他のカードと差別化しやすい

コードのポイント

clip-pathによる切り抜き:

.card-image {
    clip-path: circle(150px at top);
}

clip-path: circle()で円形に切り抜き
at topで円の中心を上部に配置
結果として下部が半円形にカットされる

object-fitとの組み合わせ:

.card-image {
    width: 100%;
    height: 150px;
    object-fit: cover; /* 画像を領域に合わせてトリミング */
    clip-path: circle(150px at top);
}

object-fit: coverで画像の縦横比を保ちながらトリミング

画像を波形で切り抜いたCSSカードデザイン

「mask-image」でSVGの波形パターンを使って画像を切り抜いてます

HTML

<div class="wrapper">
    <a href="#" class="card">
        <div class="card-image-box">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2016/11/29/05/45/astronomy-1867616_640.jpg">
        </div>
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
    <a href="#" class="card">
        <div class="card-image-box">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2016/11/29/05/45/astronomy-1867616_640.jpg">
        </div>
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
    <a href="#" class="card">
        <div class="card-image-box">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2016/11/29/05/45/astronomy-1867616_640.jpg">
        </div>
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
</div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 20px #ccc;
    overflow: hidden;
    transition: 0.5s;
    text-decoration: none;
    color: #333;
}

.card-image-box {
    position: relative;
    height: 160px;
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,100 Q300,120 600,100 T1200,100 L1200,0 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,100 Q300,120 600,100 T1200,100 L1200,0 Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.card:hover {
    box-shadow: 0 10px 30px #999;
    transform: translateY(-5px);
}

.card-box {
    padding: 0 1rem 1rem;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    line-height: 1.5;
    color: #666;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

aタグを使用して、画像の下部を波形で切り抜いたカードを作成してください。

### 初期状態
- 白い背景
- 画像の下部を緩やかな波形で切り抜く
- 柔らかい影

### ホバー時
- 影が濃くなる
- カードが少し上に浮き上がる

このカードの特徴

波形切り抜き mask-imageでSVGの波形パターンを適用
有機的なデザイン 直線ではなく曲線で自然な印象
ホバーで浮遊 上方向への移動で立体感を演出
クロスブラウザ対応 WebKit用のプレフィックス付き

コードのポイント

mask-imageによる波形切り抜き:

.card-image {
    mask-image: url("data:image/svg+xml,...");
    -webkit-mask-image: url("data:image/svg+xml,...");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
}

mask-imageでSVGの波形パターンを適用
インラインSVGをdata URI形式で指定
-webkit-プレフィックスでSafari/Chrome対応

ホバー時の浮遊効果:

.card:hover {
    box-shadow: 0 10px 30px #999;
    transform: translateY(-5px);
}

translateY(-5px)で上方向に移動
影を大きくして浮遊感を強調

画像を上にずらしたCSSカードデザイン

「position: absolute;」で画像を上にずらしてます

HTML

<div class="wrapper">
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2016/08/01/20/15/girl-1562025_640.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2016/08/01/20/15/girl-1562025_640.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <img class="card-image" src="https://cdn.pixabay.com/photo/2016/08/01/20/15/girl-1562025_640.jpg">
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
            </div>
        </a>
    </div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem;
}

.card {
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    word-wrap: break-word;
    background-color: #2F2F2F;
    background-clip: border-box;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 10px 20px #ccc;
    text-decoration: none;
}

.card-image {
    position: absolute;
    top: -1rem;
    width: 90%;
    height: 180px;
    box-sizing: border-box;
    border: 5px solid #fefefe;
    border-radius: 5px;
    object-fit: cover;
}


.card:hover .card-image {
    border: 5px solid #e9ab30;
    transition: .5s;
}


.card-box {
    padding: 180px 1rem 1rem;
    color: white;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

aタグを使用して、画像がカードからはみ出したデザインを作成してください。

### 初期状態
- 暗いグレーの背景
- 画像がカードの上部からはみ出して配置
- 画像に白い太めの枠線
- 柔らかい影

### ホバー時
- 画像の枠線がゴールドに変化

このカードの特徴

はみ出しデザイン 画像がカード領域からはみ出す斬新なレイアウト
フレーム効果 画像に太い枠線でフォトフレーム風
ホバーでアクセント 枠線の色変化で注目を集める
position: absoluteの活用 親要素の外に配置するテクニック

コードのポイント

はみ出し配置の実現:

.card {
    position: relative; /* 基準点を設定 */
}

.card-image {
    position: absolute;
    top: -1rem; /* 上方向にはみ出す */
    width: 90%;
}

position: relativeで親要素を基準に
top: -1remで負の値を指定し、上にはみ出す

ホバー時の枠線変化:

.card-image {
    border: 5px solid #fefefe; /* 白い枠線 */
}

.card:hover .card-image {
    border: 5px solid #e9ab30; /* ゴールドに変化 */
}

親要素のホバーで子要素のスタイルを変更
.card:hover .card-imageセレクタで実現

Glassmorphism（グラスモーフィズム）にしたCSSカードデザイン

「backdrop-filter」でグラスモーフィズムにしています

HTML

<div class="wrapper">
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/65167fdc3f775.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/65167fdc3f775.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/65167fdc3f775.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>

</div>

CSS

.wrapper {
    background-image: url('https://pa-tu.work/storage/img/posts/651682bc9fa7e.jpg');
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    z-index: 0;
}

.card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border: 2px solid rgba(255, 255, 255, .3);
    background: rgba(232, 255, 255, .5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);
    background-clip: border-box;
    border: 0;
    border-radius: 0.5rem;
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    transition: .5s;
    flex-basis: 240px;
    text-decoration: none;
}


.card-image {
    margin: 2rem;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.card {
    color: #333;
    text-decoration: none;
}

.card:hover {
    box-shadow: 0 8px 32px 0 #353535;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
}


.card-box {
    padding: 1rem;
    color: #333;
    text-align: center;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

aタグを使用して、すりガラス効果（グラスモーフィズム）のカードを作成してください。

### 初期状態
- 背景画像の上にカードを配置
- カードは半透明で背景がぼやけて見える
- 柔らかい影
- 丸く切り抜いた画像を上部に配置

### ホバー時
- ぼかし効果が解除され、背景がクリアに見える
- 影が濃くなる

このカードの特徴

グラスモーフィズム 2020年代のトレンドデザイン
背景ぼかし効果 backdrop-filterで背後をぼかす
半透明背景 rgba()で透明度を設定
ホバーで変化 ぼかし解除で背景が鮮明に

コードのポイント

グラスモーフィズムの実現:

.card {
    background: rgba(232, 255, 255, .5); /* 半透明背景 */
    backdrop-filter: blur(13px); /* 背景をぼかす */
    -webkit-backdrop-filter: blur(13px);
}

backdrop-filter: blur()で背後の要素をぼかす
rgba()で半透明の背景色を設定
-webkit-プレフィックスでSafari対応

ホバー時のぼかし解除:

.card:hover {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
}

blur(0)でぼかしを解除し、背景をクリアに表示

ホバー時にバウンドするCSSカードデザイン

「keyframes」で「transform:translateY」を調整しバウンドさせてます

HTML

<div class="wrapper">
    <a href="#" class="card">
        <img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
    <a href="#" class="card">
        <img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
    <a href="#" class="card">
        <img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
</div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.5rem;
}

.card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-basis: 240px;
    min-width: 0;
    word-wrap: break-word;
    background-color: #131D26;
    background-clip: border-box;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 10px 20px #ccc;
    transition: .5s;
    text-decoration: none;
}

.card-image {
    margin: 1.3rem;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.card-box {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    background-color: #62C69A;
    color: white;
    text-align: center;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.card:hover {
    animation: bounce 0.5s ease-out;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-20px);
        animation-timing-function: ease-in;
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-10px);
        animation-timing-function: ease-in;
    }

    100% {
        transform: translateY(0);
    }
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

aタグを使用して、ホバー時にバウンドするカードを作成してください。

### 初期状態
- 暗い青色の背景
- 丸く切り抜いた画像を上部に配置
- 緑色のフッター部分にテキスト
- 柔らかい影

### ホバー時
- カードがバウンドするアニメーション
- 上下に2回跳ねる動き

このカードの特徴

バウンドアニメーション keyframesで弾むような動き
楽しいインタラクション ユーザーの興味を引く動的効果
物理的な動き 重力を感じさせる自然な跳ね返り
ホバーで発動 マウスオーバーでアニメーション開始

コードのポイント

@keyframesによるバウンド:

@keyframes bounce {
    0% { transform: translateY(0); }
    25% { transform: translateY(-20px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

0%→25%で上に移動、50%で戻る
75%でもう一度小さく跳ねて100%で元に戻る
2回のバウンドで自然な動きを表現

ホバー時のアニメーション適用:

.card:hover {
    animation: bounce 0.5s ease-out;
}

animationプロパティでkeyframesを適用
0.5sで素早い動き、ease-outで減速感

カードの背景を画像にしたCSSカードデザイン

「style」属性で「background-image」を指定しています

HTML

<div class="wrapper">
        <div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/6514e3b8de1fb.jpg')">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
        </div>
        <div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/64e81123caca0.jpg')">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
        </div>
        <div class="card" style="background-image:url('https://cdn.pixabay.com/photo/2021/08/12/10/38/mountains-6540497_640.jpg')">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
        </div>
    </div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.7rem;
}

.card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-basis: 240px;
    height: 340px;
    word-wrap: break-word;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

.card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(171, 102, 255, .5) 0%, rgba(116, 182, 247, .5) 90%);
    content: '';
    z-index: -1;
}

.card-title {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.card-link {
    position: absolute;
    bottom: 2rem;
    padding: 0.5rem;
    color: #fff;
    text-decoration: none;
    border: 2px solid #fff;
    transition: .5s;
}

.card-link:hover {
    background-color: #fff;
    color: #333;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

div要素を使用して、背景画像を使ったカードを作成してください。

### 初期状態
- 画像を背景として全面に表示
- 紫から青のグラデーションオーバーレイ
- タイトルを中央に配置
- 下部に枠線付きのリンクボタン

### リンクホバー時
- ボタンの背景が白に変化
- 文字色が暗い色に変化

このカードの特徴

背景画像の活用 background-imageでカード全体を画像に
グラデーションオーバーレイ 擬似要素で画像の上に色を重ねる
インラインスタイル HTML側で画像URLを個別に指定可能
中央配置のレイアウト Flexboxで要素を中央に

コードのポイント

擬似要素によるオーバーレイ:

.card::before {
    position: absolute;
    inset: 0; /* top/right/bottom/leftを0に */
    background-image: radial-gradient(...);
    content: '';
    z-index: -1;
}

::before擬似要素でグラデーションを重ねる
z-index: -1で背景画像の上、コンテンツの下に配置

インラインスタイルで画像を指定:

<div class="card" style="background-image:url('画像URL')">

HTMLのstyle属性で個別に画像を指定
同じCSSで異なる画像のカードを作成可能

ホバー時に概要が表示されるCSSカードデザイン

ホバー時に「max-height」プロパティの値を変更しています

HTML

<div class="wrapper">
        <div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/64e45894867f4.jpg')">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
            <div class="card-description">
                <p>ここにテキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
        </div>
        <div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/64e46497f2da5.jpg')">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
            <div class="card-description">
                <p>ここにテキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
        </div>
        <div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/64e4643172f79.jpg')">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
            <div class="card-description">
                <p>ここにテキストが入ります。テキストが入ります。テキストが入ります。</p>
            </div>
        </div>
    </div>

CSS

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
}

.card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-basis: 240px;
    height: 320px;
    padding: 1rem;
    word-wrap: break-word;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    z-index: 0;
}

.card::before {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(171, 102, 255, .5) 0%, rgba(116, 182, 247, .5) 90%);
    content: '';
    z-index: -1;
}

.card-link {
    position: absolute;
    bottom: 2rem;
    padding: 0.5rem;
    color: #fff;
    text-decoration: none;
    border: 2px solid #fff;
}


.card-title {
    padding: 0.5rem 1rem;
    margin:0;
    font-size: 1.5rem;
    font-weight: bold;
}

.card-description {
    overflow: hidden;
    height: 70px;
}

.card-description p {
    margin:0;
    transition: all 0.3s linear;
    transform: translateY(70px);
    line-height:1.5;
}

.card-link:hover {
    background-color: #fff;
    color: #333;
}

.card-link:hover~.card-description p {
    transform: translateY(0);
}

AIへのプロンプト例

初期状態 カード画像の下にタイトルとボタンを配置、説明文は下に隠れている
ホバー時 ボタンにホバーすると説明文がスライドして現れる

このカードの特徴

インタラクティブ ボタンホバーで説明文が登場するサプライズ感
情報の階層化 最初はシンプル、必要なときに詳細表示
スムーズなアニメーション translateYとtransitionで滑らかに移動
兄弟要素連携 ボタンのホバーで別要素をコントロール

コードのポイント

/* 説明文を初期状態で下に隠す */
.card-description p {
    transform: translateY(70px);
    transition: 0.3s;
}

/* 兄弟要素コンビネータ（~）でボタンの後の要素を操作 */
.card-link:hover~.card-description p {
    transform: translateY(0);
}

/* はみ出した部分を隠す */
.card-description {
    overflow: hidden;
}

~（兄弟コンビネータ）を使うことで、ホバーした要素の後に続く兄弟要素にスタイルを適用できます。ボタンにホバーすると、その後に配置された説明文がスライドアップして表示される仕組みです。

ホバー時に180度回転するCSSカードデザイン

「transform-style: preserve-3d」で3Dにし「transform: rotateY(-180deg)」で回転させてます

HTML

<div class="wrapper">
        <div class="card">
            <div class="card-front" style="background-image:url('https://pa-tu.work/storage/img/posts/64faf303a4eba.jpg')"></div>
            <div class="card-back">
                <h2 class="card-title">カードタイトル</h2>
                <div class="card-description">
                    <p>ここにテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
                </div>
                <a href="#" class="card-link">詳細はこちら</a>
            </div>
        </div>
        <div class="card">
            <div class="card-front" style="background-image:url('https://pa-tu.work/storage/img/posts/64dd3d12cdfb4.jpg')"></div>
            <div class="card-back">
                <h2 class="card-title">カードタイトル</h2>
                <div class="card-description">
                    <p>ここにテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
                </div>
                <a href="#" class="card-link">詳細はこちら</a>
            </div>
        </div>
        <div class="card">
            <div class="card-front" style="background-image:url('https://pa-tu.work/storage/img/posts/64dd3d11c3be3.jpg')"></div>
            <div class="card-back">
                <h2 class="card-title">カードタイトル</h2>
                <div class="card-description">
                    <p>ここにテキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
                </div>
                <a href="#" class="card-link">詳細はこちら</a>
            </div>
        </div>

    </div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
}

.card {
    position: relative;
    cursor: pointer;
    flex-basis: 240px;
    height: 330px;
    padding: 1rem;
    box-sizing: border-box;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card-front,
.card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    text-align: center;
    transition: 0.5s;
    box-shadow: 0 0 10px #555;
}

.card-front {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(80%);
    transform: rotateY(0deg);
}

.card-back {
    padding: 2rem 1rem;
    color: white;
    box-sizing: border-box;
    transform: rotateY(180deg);
    background-color: #353535;
}


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

.card:hover .card-back {
    transform: rotateY(0deg);
}


.card-title {
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    font-weight: bold;
}

.card-description {
    margin: 1rem 0 4rem;
    line-height: 1.5;
}

.card-link {
    padding: 1rem;
    color: #fff;
    text-decoration: none;
    border: 2px solid #fff;
    transition: all .5s;
}

.card-link:hover {
    background-color: #fff;
    color: #333;
}

AIへのプロンプト例

初期状態 画像が表示されたカード、裏面は隠れている
ホバー時 カードが180度回転し、裏面のテキスト情報が表示される

このカードの特徴

3D回転 preserve-3dとrotateYで本物のカードをめくるような動き
表裏の切り替え backface-visibilityで反対面を非表示
インパクト大 フリップアニメーションで強い印象を与える
情報の分離 表面は画像、裏面はテキストと役割を分担

コードのポイント

/* 3D空間を有効化 */
.card {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* 裏面を非表示にする */
.card-front,
.card-back {
    backface-visibility: hidden;
    transition: 0.5s;
}

/* 裏面は最初から180度回転した状態 */
.card-back {
    transform: rotateY(180deg);
}

/* ホバーで表裏を入れ替え */
.card:hover .card-front {
    transform: rotateY(-180deg);
}
.card:hover .card-back {
    transform: rotateY(0deg);
}

transform-style: preserve-3dで3D空間を作り、backface-visibility: hiddenで裏返しになった要素を非表示にします。表面と裏面を180度ずらして配置し、ホバーで同時に回転させることでフリップ効果を実現しています。

4つ角の括弧がホバー時に現れるCSSカードデザイン

ホバー時に「background-size」を変更して伸ばしてます

HTML

<div class="wrapper">
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/64faf303a4eba.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/6516933d6349d.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/6516933d6926c.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
</div>
<script id="js-section">


</script>

CSS

:root {
    --x-gradient: linear-gradient(90deg, #353535 0 4px, transparent 0 calc(100% - 4px), #353535 calc(100% - 4px));
    --y-gradient: linear-gradient(#353535 0 4px, transparent 0 calc(100% - 4px), #353535 calc(100% - 4px));
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #f1f1f1;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    padding: 1rem;
    word-wrap: break-word;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 0.25rem;
    background-image:
        var(--x-gradient),
        var(--y-gradient),
        var(--x-gradient),
        var(--y-gradient);
    background-repeat: no-repeat;
    background-size: 100% 0%, 0% 100%, 100% 0%, 0% 100%;
    background-position: top, right, bottom, left;
    color: #333;
    text-decoration: none;
    transition: 0.5s;
}

.card-image {
    width: 100%;
    object-fit: cover;
    height: 150px;
}

.card-box {
    padding: 1rem 0;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.card:hover {
    background-size: 100% 20px, 20px 100%, 100% 20px, 20px 100%;
}

AIへのプロンプト例

初期状態 シンプルな白背景のカード、括弧の装飾はない
ホバー時 4つ角にL字型の括弧が現れる

このカードの特徴

独創的な装飾 4隅に括弧が現れるユニークなエフェクト
グラデーション活用 linear-gradientで角の装飾を作成
background-sizeアニメーション サイズ変更でスムーズに出現
CSS変数 再利用しやすいグラデーションパターン

コードのポイント

/* CSS変数でL字型のグラデーションを定義 */
:root {
    --x-gradient: linear-gradient(90deg, #353535 0 4px, transparent 0 calc(100% - 4px), #353535 calc(100% - 4px));
    --y-gradient: linear-gradient(#353535 0 4px, transparent 0 calc(100% - 4px), #353535 calc(100% - 4px));
}

/* 4辺に配置（初期状態はサイズ0） */
.card {
    background-image: var(--x-gradient), var(--y-gradient), var(--x-gradient), var(--y-gradient);
    background-size: 100% 0%, 0% 100%, 100% 0%, 0% 100%;
    background-position: top, right, bottom, left;
}

/* ホバーでサイズを広げる */
.card:hover {
    background-size: 100% 20px, 20px 100%, 100% 20px, 20px 100%;
}

linear-gradientで両端だけ色がついたグラデーションを作り、4辺に配置します。初期状態ではbackground-sizeを0にして隠し、ホバーでサイズを広げることで括弧が現れる効果を実現しています。

4つ角の括弧をホバー時に伸ばすCSSカードデザイン

ホバー時に「background-size」を変更して伸ばしてます

HTML

<div class="wrapper">
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/64faf303a4eba.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/64faf303a4eba.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/64faf303a4eba.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <p class="card-description">カードの概要がここに入ります。カードの概要がここに入ります。カードの概要がここに入ります。</p>
        </div>
    </a>
</div>
<script id="js-section">





</script>

CSS

:root {
    --x-gradient: linear-gradient(90deg, #353535 0 4px, transparent 0 calc(100% - 4px), #353535 calc(100% - 4px));
    --y-gradient: linear-gradient(#353535 0 4px, transparent 0 calc(100% - 4px), #353535 calc(100% - 4px));
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #f1f1f1;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;

    padding: 1rem;
    word-wrap: break-word;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 0.25rem;
    background-image:
        var(--x-gradient),
        var(--y-gradient),
        var(--x-gradient),
        var(--y-gradient);
    background-repeat: no-repeat;
    background-size: 100% 20px, 20px 100%, 100% 20px, 20px 100%;
    background-position: top, right, bottom, left;
    color: #333;
    text-decoration: none;
    transition: 0.5s;
}

.card-image {
    width: 100%;
    object-fit: contain;
}

.card-box {
    padding: 1rem 0;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.card:hover {
    background-size: 100% 40px, 40px 100%, 100% 40px, 40px 100%;
}

AIへのプロンプト例

初期状態 4つ角に小さなL字型の括弧が表示されたカード
ホバー時 括弧がカードの辺に沿って伸びる

このカードの特徴

ダイナミック 括弧が伸びるアニメーションで動きを演出
シンプルな実装 background-sizeの値を変えるだけ
視覚的フィードバック ホバーの反応がわかりやすい
枠線の代替 borderを使わずにフレームを表現

コードのポイント

/* 初期状態で小さな括弧を表示 */
.card {
    background-image: var(--x-gradient), var(--y-gradient), var(--x-gradient), var(--y-gradient);
    background-size: 100% 20px, 20px 100%, 100% 20px, 20px 100%;
    background-position: top, right, bottom, left;
    transition: 0.5s;
}

/* ホバーで括弧を2倍に伸ばす */
.card:hover {
    background-size: 100% 40px, 40px 100%, 100% 40px, 40px 100%;
}

セクション13と同じ手法ですが、初期状態で括弧が見えている点が異なります。ホバーでサイズを大きくすることで、括弧が辺に沿って伸びていく効果を表現しています。

リンクボタンホバー時にする親要素のカードを浮き上がらせるデザイン

「pointer-events」を使用し親要素に影を入れてます。

HTML

<div class="wrapper">
    <div class="card">
        <img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
        </div>
    </div>
    <div class="card">
        <img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
        </div>
    </div>
    <div class="card">
        <img class="card-image" src="https://cdn.pixabay.com/photo/2017/04/01/21/06/portrait-2194457_640.jpg">
        <div class="card-box">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
        </div>
    </div>
</div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fefefe;
}

.card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #131D26;
    background-clip: border-box;
    border: 0;
    border-radius: 0.25rem;
    transition: .5s;
    flex-basis: 240px;
    pointer-events: none;
}

.card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    transform: translateY(-10px) scale(1.02);
}

.card-image {
    margin: 2rem;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}

.card-link {
    display: inline-block;
    margin-top: 3rem;
    padding: 1rem;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    pointer-events: auto;
    transition: 0.5s;
}

.card-link:hover {
    background-color: #fff;
    color: #333;
}

.card-box {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    background-color: #62C69A;
    color: white;
    text-align: center;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

AIへのプロンプト例

以下のようなプロンプトをAIに送信します：

div要素を使用して、リンクボタンにホバーしたときに親カード全体が浮き上がるデザインを作成してください。

### 初期状態
- 暗い青色の背景
- 丸く切り抜いた画像を上部に配置
- 緑色のフッター部分にリンクボタンを配置
- カード全体はクリックできず、リンクボタンのみクリック可能

### リンクボタンホバー時
- リンクボタンの背景が白に変化
- 親カード全体が上に浮き上がる
- カードに柔らかい影が付く
- カードが少し拡大する

### リンクボタンの初期状態
- 白い枠線のみで背景は透明
- 白い文字

このカードの特徴

ポインターイベント制御 カード全体のクリックを無効化し、リンクボタンのみ操作可能に
親要素への影響 子要素のホバーで親要素のスタイルが変化する高度なテクニック
浮遊感のある動き 浮き上がり + スケールアップで立体的な表現
緑と紺のコントラスト フッター部分との色の対比で視認性を確保

コードのポイント

pointer-eventsによる制御:

.card {
    pointer-events: none; /* カード全体のクリックを無効化 */
}

.card-link {
    pointer-events: auto; /* リンクのみクリック可能に */
}

pointer-events: noneで親要素のマウスイベントを無効化
pointer-events: autoで子要素のリンクのみクリック可能に
この組み合わせで、リンクホバー時に親の:hoverが発動

浮き上がりアニメーション:

.card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    transform: translateY(-10px) scale(1.02);
}

translateY(-10px)で上方向に移動
scale(1.02)で2%拡大し、浮遊感を強調
box-shadowで柔らかい影を追加

ホバー時にホバーした部分だけ画像が拡大するCSSカードデザイン

ホバー用の「div」要素を作り、JSで位置や画像を取得して拡大しています。

HTML

<div class="wrapper">
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/651c84a3d626b.jpg">
    </a>
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/651c84a4494de.jpg">
    </a>
    <a href="#" class="card">
        <img class="card-image" src="https://pa-tu.work/storage/img/posts/651c84a4b23fc.jpg">
    </a>
</div>
<div id="hover-effect"></div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    height: 300px;
    word-wrap: break-word;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#hover-effect {
    position: absolute;
    width: 50px;
    height: 50px;
    transform: scale(2);
    pointer-events: none;
    display: none;
    border-radius: 50%;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    const hoverEffect = document.getElementById("hover-effect");
    const cardImages = document.querySelectorAll(".card-image");

    cardImages.forEach((cardImage) => {
        const cardImageBox = cardImage.parentElement;

        cardImage.addEventListener("mousemove", function(e) {
            const x = e.clientX - cardImageBox.getBoundingClientRect().left - hoverEffect.offsetWidth / 2;
            const y = e.clientY - cardImageBox.getBoundingClientRect().top - hoverEffect.offsetHeight / 2;

            // 画像サイズに合わせてbackgroundSizeを変更
            const imgWidth = cardImage.offsetWidth;
            const imgHeight = cardImage.offsetHeight;
            hoverEffect.style.backgroundSize = `${imgWidth}px ${imgHeight}px`;

            // ホバーエフェクトの位置と画像を変更
            hoverEffect.style.left = (cardImageBox.getBoundingClientRect().left + x) + "px";
            hoverEffect.style.top = (cardImageBox.getBoundingClientRect().top + y) + "px";
            hoverEffect.style.backgroundImage = `url(${cardImage.getAttribute('src')})`;
            hoverEffect.style.backgroundPosition = `-${x}px -${y}px`;
            hoverEffect.style.display = "block";
        });

        cardImage.addEventListener("mouseleave", function() {
            hoverEffect.style.display = "none";
        });
    });
});

AIへのプロンプト例

初期状態 シンプルな画像カード
ホバー時 マウスカーソルに追従する円形の虫眼鏡で画像が拡大表示される

このカードの特徴

虫眼鏡効果 カーソル位置の画像が拡大される独自のエフェクト
JavaScriptとの連携 マウス座標を取得してリアルタイムに更新
pointer-events: none ホバー要素がクリックを妨げない設計
background-position 画像の対応する部分を正確に表示

コードのポイント

// マウス位置を取得
const x = e.clientX - cardImageBox.getBoundingClientRect().left - hoverEffect.offsetWidth / 2;
const y = e.clientY - cardImageBox.getBoundingClientRect().top - hoverEffect.offsetHeight / 2;

// ホバー要素に同じ画像を設定し、位置を合わせる
hoverEffect.style.backgroundImage = `url(${cardImage.getAttribute('src')})`;
hoverEffect.style.backgroundPosition = `-${x}px -${y}px`;

別の要素に同じ画像を背景として設定し、transform: scale(2)で拡大。backgroundPositionを負の値で指定することで、マウス位置に対応する画像部分が表示されます。

ホバー時にグラデーションを入れたCSSカードデザイン

ホバー時に「before擬似要素」で画像にグラデーションを入れてます。

HTML

<div class="wrapper">
        <div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/6514e3b8de1fb.jpg')">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
        </div>
        <div class="card" style="background-image:url('https://pa-tu.work/storage/img/posts/64e81123caca0.jpg')">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
        </div>
        <div class="card" style="background-image:url('https://cdn.pixabay.com/photo/2021/08/12/10/38/mountains-6540497_640.jpg')">
            <h2 class="card-title">カードタイトル</h2>
            <a href="#" class="card-link">詳細はこちら</a>
        </div>
    </div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.7rem;
}

.card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-basis: 240px;
    height: 340px;
    word-wrap: break-word;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    cursor:pointer;
    z-index: 0;
    transition: .5s;
}


.card-title {
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.card-link {
    position: absolute;
    bottom: 2rem;
    padding: 0.5rem;
    color: #fff;
    text-decoration: none;
    border: 2px solid #fff;
}

.card:hover .card-link{
    background-color: #fff;
    color: #333;
}

.card:hover::before {
    position: absolute;
    inset:0;
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(171, 102, 255, .5) 0%, rgba(116, 182, 247, .5) 90%);
    content: '';
    z-index: -1;
}

AIへのプロンプト例

初期状態 背景画像にタイトルとボタンを配置したカード
ホバー時 画像の上にグラデーションのオーバーレイが表示される

このカードの特徴

雰囲気の演出 グラデーションで画像に彩りを加える
擬似要素活用 ::beforeで画像を覆うレイヤーを作成
z-indexの制御 テキストの背後にグラデーションを配置
視認性向上 オーバーレイで白文字の可読性アップ

コードのポイント

/* ホバー時に擬似要素でグラデーションを表示 */
.card:hover::before {
    position: absolute;
    inset: 0; /* top/right/bottom/leftを0に */
    background-image: radial-gradient(
        circle farthest-corner at 10% 20%,
        rgba(171, 102, 255, .5) 0%,
        rgba(116, 182, 247, .5) 90%
    );
    content: '';
    z-index: -1; /* テキストの背後に配置 */
}

inset: 0はtop/right/bottom/left: 0のショートハンドです。z-index: -1で画像とテキストの間にグラデーションレイヤーを配置し、半透明のオーバーレイ効果を実現しています。

ホバー時に画像が拡大するCSSカードデザイン

画像をdivでラップして「overflow: hidden;」を指定。ホバー時に画像を「transform: scale(1.2);」で拡大させてます。

HTML

<div class="wrapper">
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
    </div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    word-wrap: break-word;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}

.card-image-box {
    overflow: hidden;
    height: 200px;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}


.card-box {
    padding: 1rem;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card:hover img {
    transform: scale(1.2);
}

AIへのプロンプト例

初期状態 画像とテキストを縦に配置したカード
ホバー時 画像がズームインする

このカードの特徴

ダイナミック 画像の拡大で視覚的なインパクトを与える
はみ出し防止 overflow: hiddenで拡大部分をクリップ
滑らかな動き transitionで自然なズームを実現
シンプルな実装 scaleを変えるだけの簡単な仕組み

コードのポイント

/* 画像を囲むボックスではみ出しを隠す */
.card-image-box {
    overflow: hidden;
}

/* 画像にトランジションを設定 */
.card-image {
    transition: transform 0.3s ease-in-out;
}

/* ホバーで1.2倍に拡大 */
.card:hover img {
    transform: scale(1.2);
}

画像を直接拡大すると親要素からはみ出してしまうため、overflow: hiddenを持つラッパー要素で囲むことがポイントです。scale(1.2)で20%拡大し、適度なズーム感を演出しています。

ホバー時に画像が明るくなるCSSカードデザイン

画像を「filter: brightness(60%)」ですこそ暗くして。ホバー時にfilterを解除してます。

HTML

<div class="wrapper">
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
    </div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    word-wrap: break-word;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}


.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    filter: brightness(0.6);
    transition: filter 0.3s ease-in-out;
}


.card-box {
    padding: 1rem;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card:hover img {
    filter: brightness(1);
}

AIへのプロンプト例

初期状態 画像が暗めに表示されたカード
ホバー時 画像が元の明るさに戻る

このカードの特徴

明暗のコントラスト 暗い画像がホバーで明るくなり注目を集める
filterプロパティ活用 brightness関数で明るさを調整
クリック誘導 明るくなることで「選択中」を表現
落ち着いた印象 初期状態で画像を抑え、UIをシンプルに

コードのポイント

/* 初期状態で60%の明るさに */
.card-image {
    filter: brightness(0.6);
    transition: filter 0.3s ease-in-out;
}

/* ホバーで元の明るさ(100%)に戻す */
.card:hover img {
    filter: brightness(1);
}

filter: brightness()で画像の明るさを調整します。0が真っ黒、1が元の明るさ、1以上で明るくなります。ホバーで1に戻すことで、画像が「浮き上がる」ような効果が生まれます。

ホバー時にグレースケールが解除されるCSSカードデザイン

ホバー時に画像を「filter:grayscale」を変化させてます

HTML

<div class="wrapper">
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
    </div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    word-wrap: break-word;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}

.card-image-box {
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    filter: grayscale(0.7);
    transition: filter 0.3s ease-in-out;
}


.card-box {
    padding: 1rem;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card:hover img {
    filter: grayscale(0);
}

AIへのプロンプト例

初期状態 グレースケール（白黒）で表示された画像カード
ホバー時 カラーに戻る

このカードの特徴

ビフォーアフター効果 モノクロからカラーへの変化でインパクト
アート風の表現 グレースケールでスタイリッシュな印象
注目の集中 ホバー中のカードだけがカラーで目立つ
ポートフォリオ向け 写真ギャラリーに最適

コードのポイント

/* 初期状態で70%グレースケール */
.card-image {
    filter: grayscale(0.7);
    transition: filter 0.3s ease-in-out;
}

/* ホバーでカラーに戻す */
.card:hover img {
    filter: grayscale(0);
}

filter: grayscale()で画像を白黒に変換します。値は0（カラー）から1（完全な白黒）の間で指定します。0.7で適度なモノクロ感を出し、ホバーで0に戻すことでカラフルに「蘇る」効果を演出しています。

ホバー時にセピアが解除されるCSSカードデザイン

ホバー時に画像を「filter:sepia」を変化させてます

HTML

<div class="wrapper">
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
    </div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    word-wrap: break-word;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    text-decoration: none;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
}

.card-image-box {
    overflow: hidden;
}

.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    filter: sepia(.7);
    transition: filter 0.3s ease-in-out;
}


.card-box {
    padding: 1rem;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card:hover img {
    filter: sepia(0);
}

AIへのプロンプト例

初期状態 セピア調（茶色がかった色）で表示された画像カード
ホバー時 カラーに戻る

このカードの特徴

レトロな雰囲気 セピアで古い写真のような風合い
ノスタルジック 歴史や回想をテーマにしたサイトに最適
色の変化 セピアからカラーへの変化で時代を感じさせる
統一感 複数の画像を同じトーンで揃えられる

コードのポイント

/* 初期状態で70%セピア */
.card-image {
    filter: sepia(0.7);
    transition: filter 0.3s ease-in-out;
}

/* ホバーでカラーに戻す */
.card:hover img {
    filter: sepia(0);
}

filter: sepia()で画像にセピア調の色合いを適用します。grayscaleと同様に0から1の値で強度を指定します。古い写真風の表現や、温かみのある雰囲気を出したい場合に効果的です。

ホバー時にカードが少し拡大するCSSカードデザイン

ホバー時に画像を「transform: scale(1.05);」で少し拡大させてます。

HTML

<div class="wrapper">
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287be1db.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287b1635.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
        <a href="#" class="card">
            <div class="card-image-box">
                <img class="card-image" src="https://pa-tu.work/storage/img/posts/64d40287c7bdd.jpg">
            </div>
            <div class="card-box">
                <h2 class="card-title">カードタイトル</h2>
                <p class="card-description">カードの概要がここに入ります。</p>
            </div>
        </a>
    </div>

CSS

.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
}

.card {
    display: flex;
    flex-direction: column;
    flex-basis: 240px;
    word-wrap: break-word;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #333;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.card-image-box {
    overflow: hidden;
}

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


.card-box {
    padding: 1rem;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

AIへのプロンプト例

初期状態 通常サイズで表示されたカード
ホバー時 カード全体が少し拡大する

このカードの特徴

シンプルで効果的 最も基本的なホバーエフェクト
視覚的フィードバック 選択中であることが直感的にわかる
影との組み合わせ 拡大と影で浮き上がり感を強調
汎用性が高い どんなデザインにも合わせやすい

コードのポイント

/* カードにトランジションを設定 */
.card {
    transition: transform 0.3s ease-in-out;
}

/* ホバーで5%拡大し、影を強調 */
.card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

scale(1.05)で5%だけ拡大することで、派手すぎず上品なホバー効果を実現しています。box-shadowも同時に強調することで、カードが浮き上がったような立体感が生まれます。

まとめ

22種類もあると、色んなシーンで使えそうですね。

filterプロパティとか、3D回転とか、知らなかったテクニックがたくさんありました。

基本パターンをベースに、ホバーエフェクトを組み合わせると表現の幅が広がるよ。今回紹介したテクニックをまとめておくね。

画像付きカードデザインのポイント

基本レイアウト Flexboxで水平・垂直配置を柔軟に
box-shadow 影で立体感と浮遊感を演出
clip-path / mask-image 画像を円形・半円・波形に切り抜き
backdrop-filter Glassmorphism（すりガラス風）の実装
transform scale、translateY、rotateYで動きを表現
filter brightness、grayscale、sepiaで画像の色調を変化
pointer-events 子要素のホバーで親要素に効果を適用
疑似要素 ::beforeでオーバーレイやグラデーションを追加

気に入ったデザインをコピーして、自分のプロジェクトで活用してみてください。