So verwenden Sie CSS, um ein kleines Bild herunterzuziehen und ein großes Bild und Informationen anzuzeigen

Heute werde ich über einen CSS-Spezialeffekt sprechen, bei dem man mit der Maus über ein kleines Bild fährt, um ein großes Bild und Informationen anzuzeigen. Dieser Effekt wird häufig in Taobao, JD.com und anderen Einkaufszentren verwendet. Schauen wir uns zunächst die Bildanzeige an:

Bitte fügen Sie eine Beschreibung des Bildes hinzu

Wenn möglich, können Sie auch Schatten und Verzögerungseffekte einstellen. Wenn Sie es sehen möchten, können Sie sich die vorherigen CSS-Spezialeffektfälle ansehen!

Bitte fügen Sie eine Beschreibung des Bildes hinzu

Die Designidee ist auch sehr einfach: Zuerst wird das große Bild unten ausgeblendet und beim Hovern wird dann das kleine Bild angezeigt! Detaillierte Kommentare sind auch im Quellcode enthalten.

Hängen Sie den Quellcode an:

<!DOCTYPE html>
<html>

<Kopf>
    <title>Dropdown-Bild</title>
    <meta charset="utf-8">
    <Stil>
        Körper {
            Textausrichtung: zentriert;
        }
        
        .runterfallen {
            /* Position ist relativ, die folgenden untergeordneten Elemente können als Referenz verwendet werden*/
            Position: relativ;
            /* Als Inline-Element auf Blockebene definiert */
            Anzeige: Inline-Block;
        }
        
        .dropdown-inhalt {
            /* Diesen Teil des Inhalts, einschließlich Bilder, nicht anzeigen*/
            Anzeige: keine;
            /* Absolute Positionierung */
            Position: absolut;
            Hintergrundfarbe: #f9f9f9;
            Mindestbreite: 160px;
            Kastenschatten: 0px 8px 16px 0px rgba (0, 0, 0, 0,2);
        }
        
        .dropdown:hover .dropdown-inhalt {
            /* Zeige das große Bild, wenn die Maus darüber bewegt wird*/
            Anzeige: Block;
        }
        /* Setze folgenden Kommentartext */
        
        .desc {
            Polsterung: 15px;
            Textausrichtung: zentriert;
        }
    </Stil>
</Kopf>

<Text>

    <h2>Ziehen Sie das kleine Bild nach unten, um das große Bild anzuzeigen</h2>
    <p>Bewegen Sie die Maus über das Bild, um das Dropdown-Bild und die Bildinformationen anzuzeigen</p>

    <div Klasse="Dropdown">
        <img src="img/1.jpg" alt="Katze" width="100" height="66" style="border-radius: 5px;">
        <div Klasse="Dropdown-Inhalt">
            <img src="img/1.jpg" alt="Katze" width="400" height="260" style="border-radius: 10px;">
            <div class="desc">Ein süßes kleines Kätzchen! </div>
        </div>
    </div>


</body>

</html>

Dies ist das Ende dieses Artikels über die Verwendung von CSS zum Herunterziehen kleiner Bilder, um große Bilder und Informationen anzuzeigen. Weitere relevante CSS-Inhalte zum Herunterziehen kleiner Bilder, um große Bilder anzuzeigen, finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: 10 Tipps für das User Interface Design mobiler Apps

>>: Detaillierte Erläuterung der Vuex-Persistenz in der praktischen Anwendung von Vue

JS implementiert ein einfaches Flipperspiel, bei dem Ziegelsteine zerschlagen werden müssen

Detaillierte Erläuterung von MySQL-Unterabfragen (verschachtelte Abfragen), Verknüpfungstabellen und kombinierten Abfragen

Artikel

Konfigurieren Sie ein Implementierungsbeispiel für den Mysql-Master-Slave-Dienst

Artikel

CSS verwendet die Alibaba-Vektorbibliothek, um den entsprechenden Positionen schnell ansprechende Symboleffekte hinzuzufügen (Beispielcode).

Rufen Sie die Alibaba-Vektorsymbolbibliothek auf ...

So verwenden Sie CSS, um ein kleines Bild herunterzuziehen und ein großes Bild und Informationen anzuzeigen

JS implementiert ein einfaches Flipperspiel, bei dem Ziegelsteine zerschlagen werden müssen

So zählen Sie die Anzahl bestimmter Zeichen in einer Datei unter Linux

Eine kurze Erläuterung zum Festlegen der absoluten CSS-Position relativ zum übergeordneten Element

js implementiert Tabellen-Drag-Optionen

Lernen Sie, wie Sie mit charAt() in JavaScript die am häufigsten vorkommenden Zeichen und deren Anzahl zählen.

CenterOS7 Installations- und Konfigurationsumgebung jdk1.8 Tutorial

Grafische Erklärung des Funktionsaufrufs der Protodatei in Vue

Detaillierte Erklärung zur Verwendung des Grep-Befehls in Linux

Detaillierte Erläuterung von MySQL-Unterabfragen (verschachtelte Abfragen), Verknüpfungstabellen und kombinierten Abfragen

Konfigurieren Sie ein Implementierungsbeispiel für den Mysql-Master-Slave-Dienst

Artikel empfehlen

HTML-Tutorial: Definitionsliste

Docker-Fallanalyse: Erstellen eines MySQL-Datenbankdienstes

Detaillierte Schritte zum Ausführen eines Springboot-Projekts in Linux Docker

Detaillierte Schritte zur Installation der Node.js-Umgebung und Pfadkonfiguration unter Linux

Docker-Compose - Bereitstellung der chinesischen Gitlab-Version per Mausklick - Methodenschritte

Eine audiovisuelle Linux-Distribution, die Audiophile anspricht

So installieren Sie Git unter Linux

So installieren Sie MySQL in Docker

Ein vollständiges Beispiel für die mehrstufige Sprungfunktion (Seiten-Drilldown) von Vue für verwandte Seiten

CSS verwendet die Alibaba-Vektorbibliothek, um den entsprechenden Positionen schnell ansprechende Symboleffekte hinzuzufügen (Beispielcode).

Lösen Sie das Problem, dass MySQL einen ungültigen Standardwert für den Fehler „operate_time“ meldet.

Lösen Sie das Problem der verstümmelten Zeichen im Tomcat10 Catalina-Protokoll

HTML+CSS+JavaScript zum Erstellen eines einfachen Tic-Tac-Toe-Spiels

Codebeispiele für den Import und Export von Docker-Images

Eine kurze Diskussion darüber, ob MySQL eine Funktion ähnlich der nvl von Oracle haben kann