CSS を使用して小さな画像をプルダウンし、大きな画像と情報を表示する方法

今日は、Taobao、JD.comなどのショッピングモールでよく使われている、小さな画像の上にマウスを移動すると大きな画像と情報が表示されるCSS特殊効果についてお話します。まずは画像の表示を見てみましょう。

画像の説明を追加してください

可能であれば、影や遅延効果も設定できます。確認したい場合は、以前の CSS 特殊効果の事例を参照してください。

画像の説明を追加してください

デザインのアイデアも非常にシンプルで、まず下の大きな画像を非表示にして、マウスをホバーすると小さな画像が表示されるというものです。ソースコードには詳細なコメントも含まれています。

ソースコードを添付します:

<!DOCTYPE html>
<html>

<ヘッド>
    <title>ドロップダウン画像</title>
    <メタ文字セット="utf-8">
    <スタイル>
        体 {
            テキスト配置: 中央;
        }
        
        。落ちる {
            /* 位置は相対的であり、次の子要素を参照として使用できます*/
            位置: 相対的;
            /* インラインブロックレベル要素として定義されます */
            表示: インラインブロック;
        }
        
        .ドロップダウンコンテンツ{
            /* 画像を含むコンテンツのこの部分を表示しない*/
            表示: なし;
            /* 絶対位置指定 */
            位置: 絶対;
            背景色: #f9f9f9;
            最小幅: 160px;
            ボックスの影: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }
        
        .dropdown:hover .dropdown-content {
            /* マウスを画像の上に移動すると大きな画像が表示されます*/
            表示: ブロック;
        }
        /* 次のコメントテキストを設定します */
        
        .desc {
            パディング: 15px;
            テキスト配置: 中央;
        }
    </スタイル>
</head>

<本文>

    <h2>小さい画像を下に引くと大きい画像が表示されます</h2>
    <p>画像の上にマウスを移動すると、ドロップダウン画像と画像情報が表示されます</p>

    <div class="dropdown">
        <img src="img/1.jpg" alt="猫" width="100" height="66" style="border-radius: 5px;">
        <div class="ドロップダウンコンテンツ">
            <img src="img/1.jpg" alt="猫" width="400" height="260" style="border-radius: 10px;">
            <div class="desc">かわいい子猫ちゃん！ </div>
        </div>
    </div>


</本文>

</html>

CSS を使用して小さな画像をプルダウンして大きな画像や情報を表示する方法についての記事はこれで終わりです。小さな画像をプルダウンして大きな画像を表示する方法に関するより関連性の高い CSS コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: h5入力ボックスプロンプト+通常のテキストボックスプロンプトを実装する方法

>>: vueの実践的な応用におけるvuexの永続性の詳細な説明