レスポンシブなカードホバー効果を実現するための HTML+CSS

成し遂げる：

1. ラベルを定義します。.kapian は下のボックスで、次に 2 つのサブボックス (1 つは画像用、もう 1 つはテキスト用) を定義します。

<div class="kapian">
          <div class="tu">
             <img src="3.2.png">
          </div>
          <div class="wenben">
                <h2>オーロラ</h2>
                <p style="padding-bottom: 20px;">ナチュラル</p>
                <p>
                    オーロラは、地球の北極の高磁気緯度地域に現れる色鮮やかな光現象です。 
                    私はオーロラが大好きです。とても美しいです。
                    </p>
          </div>
    </div>

2. まず、下部ボックスの基本的な CSS スタイル、長さ、幅などを定義します。これについては詳しく説明しません。

 .kapian{
            位置: 相対的;
            幅: 300ピクセル;
            高さ: 400px;
            境界線の半径: 3px;
            背景色: #fff;
            ボックスの影: 2px 3px 3px rgb(139, 138, 138);
            オーバーフロー: 非表示;
            カーソル: ポインタ;
            遷移: すべて 0.3 秒;
        }
        .kapian:hover{
            ボックスの影: 2px 3px 10px rgb(36, 35, 35);
        }

:マウスをボックスの上に置くと、ボックスの影が変化します。
トランジション: すべて 0.3 秒; トランジション効果、影は 0.3 秒以内にゆっくりと変化します

3. 絶対配置を使用した画像の基本スタイル:

.tu{
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 100%;
            高さ: 300px;
            オーバーフロー: 非表示;
            
        }
        .tu 画像{
            幅: 100%;
            高さ: 100%;
            遷移: すべて 0.5 秒;
        }
        .kapian:hover .tu img{
            変換: スケール(1.2);
            フィルター: ぼかし(1px);
        }

: マウスを合わせると画像が大きくなり、ぼやけます。
transform: scale(1.2); 画像は1.2倍に拡大されます。
filter: blur(1px); 画像がぼやけます。

4. 絶対配置を使用して、テキストを含むボックスの基本スタイルを定義します。

.ウェンベン{
            位置: 絶対;
            下: -200px;
            幅: 100%;
            高さ: 300px;
            背景色: rgb(247, 242, 242);
            遷移: 0.5秒;
        }
        .kapian:hover .wenben{
            下: 0px;
        }

:マウスをホバーすると、絶対位置のテキストボックスの下部が変わり、テキストボックスが上方向に拡張されます。

5. テキストボックス内の文字のスタイル:

.wenben h2{
            色: rgb(21, 74, 172);
            行の高さ: 60px;
            テキスト配置: 中央;

        }
        .wenben p{
            パディング: 0 30px;
            フォントファミリー: 'fangsong';
            フォントサイズ: 16px;
            フォントの太さ: 太字;
            行の高さ: 20px;
            テキスト配置: 中央;
        }

完全なコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
            ボックスのサイズ: 境界線ボックス;
        }
        体{
            高さ：100vh;
            ディスプレイ: フレックス;
            コンテンツの中央揃え: 中央;
            アイテムの位置を中央揃えにします。
           背景画像: 放射状グラデーション(rgb(241, 238, 238),black);
        }
        .kapian{
            位置: 相対的;
            幅: 300ピクセル;
            高さ: 400px;
            境界線の半径: 3px;
            背景色: #fff;
            ボックスの影: 2px 3px 3px rgb(139, 138, 138);
            オーバーフロー: 非表示;
            カーソル: ポインタ;
            遷移: すべて 0.3 秒;
        }
        .kapian:hover{
            ボックスの影: 2px 3px 10px rgb(36, 35, 35);
        }
        .tu{
            位置: 絶対;
            上: 0;
            左: 0;
            幅: 100%;
            高さ: 300px;
            オーバーフロー: 非表示;
            
        }
        .tu 画像{
            幅: 100%;
            高さ: 100%;
            遷移: すべて 0.5 秒;
        }
        .kapian:hover .tu img{
            変換: スケール(1.2);
            フィルター: ぼかし(1px);
        }
        .ウェンベン{
            位置: 絶対;
            下: -200px;
            幅: 100%;
            高さ: 300px;

            背景色: rgb(247, 242, 242);
            遷移: 0.5秒;
        }
        .kapian:hover .wenben{
            下: 0px;
        }
        .wenben h2{
            色: rgb(21, 74, 172);
            行の高さ: 60px;
            テキスト配置: 中央;

        }
        .wenben p{
            パディング: 0 30px;
            フォントファミリー: 'fangsong';
            フォントサイズ: 16px;
            フォントの太さ: 太字;
            行の高さ: 20px;
            テキスト配置: 中央;
        }
    </スタイル>
</head>
<本文>
    <div class="kapian">
          <div class="tu">
             <img src="3.2.png">
          </div>
          <div class="wenben">
                <h2>オーロラ</h2>
                <p style="padding-bottom: 20px;">ナチュラル</p>
                <p>
                    オーロラは、地球の北極の高磁気緯度地域に現れる色鮮やかな光現象です。 
                    私はオーロラが大好きです。とても美しいです。
                    </p>
          </div>
    </div>
</本文>
</html>

要約:

希望は近づいている〜

ここに画像の説明を挿入

html+css でレスポンシブなカードホバー効果を実現する方法についての記事はこれで終わりです。より関連性の高い html+css カードホバーコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: Pure CSS3はdivの出入りを順番に実現します

>>: CSSで検索ボックスを非表示にする機能を実装します（アニメーション順方向と逆方向のシーケンス）