HTML+CSS zum Erreichen eines reaktionsfähigen Karten-Hover-Effekts
|
Dazu gibt es nicht viel zu sagen, schauen wir uns erstmal die Wirkung an:
Karten-Hover, reaktionsfähige Karte, einfacher Effekt. erreichen:1. Definieren Sie die Beschriftung. .kapian ist das untere Feld und dann zwei Unterfelder, eines für das Bild und eines für den Text:
<div Klasse="kapian">
<div Klasse="tu">
<img src="3.2.png">
</div>
<div Klasse="wenben">
<h2>Das Nordlicht</h2>
<p style="padding-bottom: 20px;">natürlich</p>
<p>
Aurora Borealis ist ein farbenfrohes Leuchtphänomen, das über der Region mit hoher magnetischer Breite am Nordpol unseres Planeten auftritt.
Ich liebe das Nordlicht. Es ist so schön.
</p>
</div>
</div>2. Definieren Sie zunächst den grundlegenden CSS-Stil der unteren Box, Länge, Breite usw., der nicht im Detail beschrieben wird:
.kapian{
Position: relativ;
Breite: 300px;
Höhe: 400px;
Rahmenradius: 3px;
Hintergrundfarbe: #fff;
Kastenschatten: 2px 3px 3px rgb(139, 138, 138);
Überlauf: versteckt;
Cursor: Zeiger;
Übergang: alle 0,3 s;
}
.kapian:hover{
Kastenschatten: 2px 3px 10px rgb(36, 35, 35);
} :Wenn Sie mit der Maus darüber fahren, ändert sich der Schatten der Box. 3. Der grundlegende Stil des Bildes unter Verwendung der absoluten Positionierung:
.tu{
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 300px;
Überlauf: versteckt;
}
.tu img{
Breite: 100 %;
Höhe: 100%;
Übergang: alle 0,5 s;
}
.kapian:hover .tu img{
transformieren: Skalierung (1,2);
Filter: Unschärfe (1px);
} : Wenn man mit der Maus darüberfährt, wird das Bild größer und unschärfer; 4. Definieren Sie den grundlegenden Stil des Felds, das den Text enthält, mithilfe der absoluten Positionierung:
.wenben{
Position: absolut;
unten: -200px;
Breite: 100 %;
Höhe: 300px;
Hintergrundfarbe: rgb(247, 242, 242);
Übergang: 0,5 s;
}
.kapian:hover .wenben{
unten: 0px;
}:Wenn die Maus darüber bewegt wird, ändert sich der untere Teil des absolut positionierten Textfelds, wodurch das Textfeld nach oben erweitert wird. 5. Der Stil der Zeichen im Textfeld:
.wenben h2{
Farbe: RGB (21, 74, 172);
Zeilenhöhe: 60px;
Textausrichtung: zentriert;
}
.wenben p{
Polsterung: 0 30px;
Schriftfamilie: „Fangsong“;
Schriftgröße: 16px;
Schriftstärke: fett;
Zeilenhöhe: 20px;
Textausrichtung: zentriert;
}Vollständiger Code:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
Box-Größe: Rahmenbox;
}
Körper{
Höhe: 100vh;
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Hintergrundbild: radialer Farbverlauf (RGB (241, 238, 238), schwarz);
}
.kapian{
Position: relativ;
Breite: 300px;
Höhe: 400px;
Rahmenradius: 3px;
Hintergrundfarbe: #fff;
Kastenschatten: 2px 3px 3px rgb(139, 138, 138);
Überlauf: versteckt;
Cursor: Zeiger;
Übergang: alle 0,3 s;
}
.kapian:hover{
Kastenschatten: 2px 3px 10px rgb(36, 35, 35);
}
.tu{
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 300px;
Überlauf: versteckt;
}
.tu img{
Breite: 100 %;
Höhe: 100%;
Übergang: alle 0,5 s;
}
.kapian:hover .tu img{
transformieren: Skalierung (1,2);
Filter: Unschärfe (1px);
}
.wenben{
Position: absolut;
unten: -200px;
Breite: 100 %;
Höhe: 300px;
Hintergrundfarbe: rgb(247, 242, 242);
Übergang: 0,5 s;
}
.kapian:hover .wenben{
unten: 0px;
}
.wenben h2{
Farbe: RGB (21, 74, 172);
Zeilenhöhe: 60px;
Textausrichtung: zentriert;
}
.wenben p{
Polsterung: 0 30px;
Schriftfamilie: „Fangsong“;
Schriftgröße: 16px;
Schriftstärke: fett;
Zeilenhöhe: 20px;
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<div Klasse="kapian">
<div Klasse="tu">
<img src="3.2.png">
</div>
<div Klasse="wenben">
<h2>Das Nordlicht</h2>
<p style="padding-bottom: 20px;">natürlich</p>
<p>
Aurora Borealis ist ein farbenfrohes Leuchtphänomen, das über der Region mit hoher magnetischer Breite am Nordpol unseres Planeten auftritt.
Ich liebe das Nordlicht. Es ist so schön.
</p>
</div>
</div>
</body>
</html>Zusammenfassen:Die Hoffnung ist auf dem Weg ~
Dies ist das Ende dieses Artikels darüber, wie Sie mit HTML+CSS responsive Karten-Hover-Effekte erzielen. Weitere relevante HTML+CSS-Karten-Hover-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Reines CSS3 realisiert den Effekt des Ein- und Austretens von Divs in der richtigen Reihenfolge
Artikel empfehlen
Die JS-Methoden addEventListener() und attachEvent() implementieren Registrierungsereignisse
Im DOM-Ereignismodell von JavaScript werden Ereig...
Tutorial zur kostenlosen Konfiguration der MySQL 5.7.18-Installationsversion
Installations-Tutorial zur kostenlosen Installati...
Details zur Verwendung regulärer Ausdrücke in MySQL
Inhaltsverzeichnis 1. Einleitung 2. Bereiten Sie ...
Tutorial zur Installation von Linux-JDK und zur Konfiguration von Umgebungsvariablen (jdk-8u144-linux-x64.tar.gz)
Es wird empfohlen, zunächst mit dem Befehl sudo s...
Modulare CSS-Lösung
Es gibt wahrscheinlich ebenso viele modulare Lösu...
Implementierungscode für die Sicherung und Wiederherstellung von MySQL-Datenbanken
Datenbanksicherung #Grammatik: # mysqldump -h ser...
Verwenden Sie die CSS-Eigenschaft border-radius, um den Bogen festzulegen
Phänomen: Wandeln Sie das Div in einen Kreis, ein...
Die umfassendste Erklärung des Sperrmechanismus in MySQL
Inhaltsverzeichnis Vorwort Globale Sperre Vollstä...
Zusammenfassung gängiger Fehler beim Entwurf von MySQL-Tabellen
Inhaltsverzeichnis Fehler 1: Zu viele Datenspalte...
MySQL 5.6.23 Installations- und Konfigurations-Umgebungsvariablen-Tutorial
In diesem Artikel finden Sie das Installations- u...
Vollständige Schritte zur Installation von mysql5.7 auf dem Mac (mit Bildern und Text)
Ich habe vor Kurzem ein Mac-System verwendet und ...
Installieren Sie Python 3.6 unter Linux und vermeiden Sie Fallstricke
Installation von Python 3 1. Abhängige Umgebung i...
Lösung für das Problem des verstümmelten Codes in MySQL 5.x
MySQL ist eine häufig verwendete Open-Source-Date...
vue2.x-Konfiguration von vue.config.js zur Projektoptimierung
Inhaltsverzeichnis Vorwort vue.config.js-Konfigur...
Detaillierte Erklärung der Vue-Anmeldung und -Abmeldung
Inhaltsverzeichnis Login-Geschäftsprozess Impleme...