BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】大きな画像や情報を小さなドロップダウンで実現するCSS

2022-02-01 06:53:34

今日はタオバオや京東などのショッピングモールでよく使われている、小さな写真にカーソルを合わせると大きな写真や情報が表示されるcssの効果についてお話します。

できれば、シャドウやディレイ効果なども設定できると思うので、よかったら過去のcssエフェクトの例もチェックしてみてください

デザインのアイデアも非常にシンプルで、最初に下の大きな絵を隠しておいて、小さな絵がホバーした時に表示させるだけです 詳細な注釈はソースコードにも記載されています。

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

<!DOCTYPE html>
<html>

<head>
    <title>dropdown image</title>
    <meta charset="utf-8">
    <style>
        body {
            text-align: center;
        }
        
        .dropdown {
            /* position is relative, the following child element can be used as a reference */
            position: relative;
            /* defined as an inline-block element */
            display: inline-block;
        }
        
        .dropdown-content {
            /* Do not display this part of the content, including images */
            display: none;
            /* absolute positioning */
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0, 0.2);
        }
        
        .dropdown:hover .dropdown-content {
            /* Show larger image when mouse over */
            display: block;
        }
        /* Set the note text below */
        
        .desc {
            padding: 15px;
            text-align: center;
        }
    </style>
</head>

<body>

    <h2>Small image drop down for larger view</h2>
    <p>Move mouse over image to show drop down image and image information</p>

    <div class="dropdown">
        <img src="img/1.jpg" alt="cat" width="100" height="66" style="border-radius: 5px;"& gt;
        <div class="dropdown-content">
            <img src="img/1.jpg" alt="cat" width="400" height="260" style="border-radius: 10px;" ;>
            <div class="desc"> A cute little kitty! </div>
        </div>
    </div>


</body>

</html>

CSSのこの記事は、全体像と情報メソッドの小さなプルダウン表示を実現するために導入され、より関連する全体像のコンテンツのCSS小さなプルダウン表示は、以前の記事のスクリプトのホームを検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来よりスクリプトのホームをサポートしている願っています！この記事で、私は、この記事で紹介されています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します