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

9 praktische CSS-Eigenschaften, die Web-Frontend-Entwickler kennen müssen

Grafische Lösung für die Installation und Deinstallation der dekomprimierten Version von MySQL 5.7 sowie für das Problem mit verstümmeltem Code

1. Installation der dekomprimierten Version (1). ...

Detaillierte Erläuterung des Excel-Parsings und -Exports basierend auf Vue

Inhaltsverzeichnis Vorwort Grundlegende Einführun...

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

In der Vergangenheit wurde Float häufig für das L...

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

9 praktische CSS-Eigenschaften, die Web-Frontend-Entwickler kennen müssen

Wie füge ich ein Website-Symbol hinzu?

Tutorial zur Verarbeitung statischer Ressourcen in Tomcat

Quellcodeanalyse des Nodejs-Modulsystems

Der Unterschied und die Ausführungsmethode von select count() und select count(1)

Untersuchung der Wirkung der durch JS realisierten Seitenseitenleiste

Benutzerdefinierter Bulletbox-Effekt von Vue (Bestätigungsfeld, Eingabeaufforderungsfeld)

Docker legt Port 2375 frei, was zu Serverangriffen und -lösungen führt

SQL-Implementierung von LeetCode (175. Zwei Tabellen verbinden)

So ändern Sie das MySQL-Passwort unter Centos

Artikel empfehlen

Lösungen für MySQL-Batch-Insert- und eindeutige Indexprobleme

Reines CSS zum Erreichen der Funktion „Klicken zum Erweitern und Lesen des Volltexts“

Implementieren eines Webplayers mit JavaScript

Vue importiert Echarts, um ein Linienstreudiagramm zu realisieren

Beispielcode zur Implementierung des Dunkelmodus mit CSS-Variablen

Grafische Lösung für die Installation und Deinstallation der dekomprimierten Version von MySQL 5.7 sowie für das Problem mit verstümmeltem Code

Detaillierte Erläuterung des Excel-Parsings und -Exports basierend auf Vue

Mehrere Möglichkeiten, das Problem des Schwebens zu lösen, das dazu führt, dass die Höhe des übergeordneten Elements in CSS zusammenbricht

Lassen Sie uns über die Leistung von MySQLs COUNT(*) sprechen.

Was tun, wenn Sie das ursprüngliche Passwort für MySQL auf dem MAC vergessen?

Beispiel für die Verwendung von Docker Compose zum Erstellen einer Consul-Clusterumgebung

7 interessante Möglichkeiten, versteckte Elemente in CSS zu erreichen

Eine kurze Diskussion über den Vater-Sohn-Werttransfer in Vue3

MySQL-Dateneinfügungsoptimierungsmethode concurrent_insert

Beispiel für die Verwendung von Nginx zur Implementierung eines TCP-Proxys mit Portweiterleitung