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:
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!
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
Artikel empfehlen
Implementierung der Breakpoint-Wiederaufnahme im Vue-Video-Player
In einem aktuellen Projekt musste ich die Funktio...
Implementierung der bidirektionalen Bindung von übergeordneten und untergeordneten Komponentendaten im Front-End-Framework Vue
Inhaltsverzeichnis 1. Einweg-Wertübertragung zwis...
CentOS6.8 verwendet cmake zur Installation von MySQL5.7.18
Unter Bezugnahme auf die Online-Informationen hab...
Eine kurze Einführung in die Abfrageeffizienz von MySQL-Speicherfeldtypen
Die Suchleistung von der schnellsten bis zur lang...
Implementierung eines Random Roll Callers basierend auf JavaScript
In diesem Artikel wird der spezifische JavaScript...
Der Unterschied und die Ausführungsmethode von select count() und select count(1)
Count(*) oder Count(1) oder Count([column]) sind ...
HTML-Textfeld (Text) ist nicht in mehreren Möglichkeiten verfügbar, um schreibgeschützt zu erreichen
Methode 1: <input id= "File1" type= &...
Der Unterschied zwischen dem Namen und der ID des Ziels eines Tags, das auf das Iframe verweist
Code kopieren Der Code lautet wie folgt: <ifra...
So erstellen Sie eine Ansicht in MySQL
Grundlegende Syntax Sie können eine Ansicht mit d...
Ausführliches Tutorial zur Installation von WinX64 unter MySQL8.0.18 (mit Bildern und Text)
Gehen Sie zu https://dev.mysql.com/downloads/mysq...
So kapseln Sie Paging-Komponenten manuell in Vue3.0
In diesem Artikel wird der spezifische Code der m...
Lösung für das Problem des wiederholten Auslösens von Funktionen in der Vue-Projektüberwachung
Inhaltsverzeichnis Problembeschreibung: Lösung 1 ...
Zusammenfassung der DTD-Verwendung in HTML
DTD ist ein Satz grammatikalischer Regeln zur Ausz...
5 Möglichkeiten zum Senden von E-Mails in der Linux-Befehlszeile (empfohlen)
Wenn Sie eine E-Mail in einem Shell-Skript erstel...
Detaillierte Erklärung der MySQL-Datumsadditions- und -subtraktionsfunktionen
1. addtime() Füge die angegebene Anzahl Sekunden ...