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

CSS3 implementiert horizontale Zentrierung, vertikale Zentrierung, horizontale und vertikale Zentrierung Beispielcode

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

CSS3 implementiert horizontale Zentrierung, vertikale Zentrierung, horizontale und vertikale Zentrierung Beispielcode

Anweisung zur Ermittlung der Browserversion und Kompatibilität mit mehreren Browsern

Tutorial zur Installation von Nginx in einer Linux-Umgebung

Warum kann das in HTML eingebettete Video im MP4-Format nicht abgespielt werden?

Lösung für die Inkonsistenz zwischen Crontab-Ausführungszeit und Systemzeit

CSS-Position feste linke und rechte Doppelpositionierungs-Implementierungscode

Bringen Sie Ihnen bei, wie Sie in 5 Minuten den Redis-Clustermodus und den Sentinelmodus mit Docker erstellen

Vue-Elternkomponente ruft Funktionsimplementierung der Unterkomponente auf

Implementieren der Prioritätswarteschlange in JavaScript

So beheben Sie den MySQL-Fehler 10061

Artikel empfehlen

Zusammenfassung der Linux-Befehlsmethoden zum Anzeigen verwendeter Befehle

Detaillierte Erklärung der Desktop-Anwendung mit Vue3 und Electron

MySQL 5.7.17 Installations- und Konfigurations-Tutorial unter CentOS6.9

JavaScript implementiert die Kontrollkästchenauswahlfunktion

Dieser Artikel zeigt Ihnen, wie die Speicherbereinigung in JavaScript funktioniert

Universelle Lösung für den Fehler beim Starten von MySQL unter Windows

Beschreibung der Standardtransaktionsisolationsebene von MySQL und Oracle

So teilen Sie Daten in MySQL-Tabellen und -Datenbanken auf

Centos6.9-Installation Mysql5.7.18 Schrittaufzeichnung

So implementieren Sie die Ajax-Kontrolle gleichzeitiger Anforderungen basierend auf JS

Installations-Tutorial zur komprimierten Version von MySQL 8.0.11 unter Win10

Implementierungsmethode für die Produktion und Bereitstellung von Docker Nginx-Containern

Detaillierte Erläuterung des Prozesses zum Einrichten einer NVIDIA-Docker-Umgebung auf einem Linux-Server

Ist es notwendig, einen separaten Index für die MySQL-Partitionsfeldspalte zu erstellen?

So verwenden Sie nginx, um auf lokale statische Ressourcen auf einem Linux-Server zuzugreifen