Thumbnail-Hover-Effekt mit CSS3 implementiert

Thumbnail-Hover-Effekt mit CSS3 implementiert

Ergebnisse erzielen

Implementierungscode

html

<Kopfzeile>
		<h1>Miniaturbild-Hover-Effekt mit <em>CSS3</em>></h1>
	</header>
	<div Klasse="Wrapper">
		<div Klasse="Galerie">
			<ul>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/2.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/3.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/1.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/4.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/5.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/7.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/8.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/6.png"></li>
			</ul>
		</div>
		<p class="attribution">Die in dieser Demo gezeigten Bilder stammen von <a href="https://d.hatena.ne.jp/koochinko">Mernan Behairi</a>. Inspiriert von einem alten Beitrag von <a href="https://twitter.com/SohTanaka">@Sohtanaka</a>. Ursprünglich wird jQuery verwendet. Zugriff auf das ursprüngliche <a href="https://web.archive.org/web/20110323065449/http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/">Tutorial</a> und die <a href="https://web.archive.org/web/20110323065952/http://www.sohtanaka.com/web-design/examples/image-zoom/">Demo</a>.</p>
	</div>

CSS3

@import-URL (https://fonts.googleapis.com/css?family=Roboto+Condensed:700);

html, Body, Div, Span, Applet, Objekt, Iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abk, akronym, adresse, bedeutung, code, e-mail,
del, dfn, em, img, ins, kbd, q, s, samp,
klein, streik, stark, sub, sup, tt, var,
b, u, i, Mitte,
dl, dt, dd, ol, ul, li,
Feldsatz, Formular, Beschriftung, Legende,
Tabelle, Beschriftung, tbody, tfoot, thead, tr, th, td,
Artikel, beiseite, Leinwand, Details, einbetten, 
Abbildung, Bildunterschrift, Fußzeile, Kopfzeile, Hgroup, 
Menü, Navigation, Ausgabe, Ruby, Abschnitt, Zusammenfassung,
Zeit, Markierung, Audio, Video {
	Rand: 0;
	Polsterung: 0;
	Rand: 0;
	Schriftgröße: 100 %;
	Schriftart: erben;
	vertikale Ausrichtung: Grundlinie;
}

Körper {
	Hintergrundfarbe: #f2f2f2;
}

Kopfzeile {
	Breite: 100 %;
	Hintergrundfarbe: #77cdb4;
	Textausrichtung: zentriert;
}

h1 {
	Schriftfamilie: „Roboto Condensed“, serifenlos;
	Farbe: #FFF;
	Schriftgröße: 2,3em;
}

em {
	Farbe: #232027;
}

.wrapper {
	Breite: 40%;
	Rand: 40px automatisch;
}

div.galerie {
	Rand oben: 30px;
}

div.gallery ul {
	Listenstiltyp: keiner;
	Rand links: 35px;
}

/* Animation */
div.gallery ul li, div.gallery li img {
	-webkit-transition: alle 0,1 s Ein- und Ausstieg;
  	-moz-transition: alle 0,1 s Ein- und Ausschalten;
  	-o-Übergang: alle 0,1 s Ein- und Ausstieg;
  	Übergang: alle 0,1 s Ein- und Ausstieg;
}

div.gallery ul li {
	Position: relativ;
	schweben: links;
	Breite: 130px;
	Höhe: 130px;
	Rand: 5px;
	Polsterung: 5px;
	Z-Index: 0;
}

/* Stellen Sie sicher, dass der Z-Index beim Hovern höher ist */
/* Stellen Sie sicher, dass das Hover-Bild die anderen überlappt */
div.gallery ul li:hover {
	Z-Index: 5;
}

/* Das Bild ist gut unter li positioniert */
div.gallery ul li img {
	Position: absolut;
	links: 0;
	oben: 0;
	Rand: 1px durchgezogen #dddddd;
	Polsterung: 5px;
	Breite: 130px;
	Höhe: 130px;
	Hintergrund: #f0f0f0;
}

div.gallery ul li img:hover {
	Breite: 200px;
	Höhe: 200px;
	Rand oben: -130px;
	Rand links: -130px;
	oben: 65 %;
	links: 65%;
}

p.Zuordnung {
	Schriftfamilie: „Consolas“;
	Farbe: #000;
	klar: beides;
	Textausrichtung: zentriert;
	Zeilenhöhe: 25px;
	Polsterung oben: 30px;
}

p.Attribution a {
	Farbe: #4c8d7c;
}

/* Reaktionsfähiger Hack */
@media only screen und (min-width: 499px) und (max-width: 1212px) {
	.wrapper {
		Breite: 500px;
	}
}

@media only screen und (max-width: 498px) {
	.wrapper {
		Breite: 300px;
	}

	div.gallery ul {
		Listenstiltyp: keiner;
		Rand: 0;
	}
}

Oben sind die Details des von CSS3 implementierten Thumbnail-Hover-Effekts aufgeführt. Weitere Informationen zum CSS3-Thumbnail-Hover finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

<<:  Installations- und Verwendungsschritte für vue-amap

>>:  So beseitigen Sie den zusätzlichen Leerraum am unteren Rand der erstellten Webseite beim Surfen

Artikel empfehlen

Docker installiert MySQL und löst das chinesische verstümmelte Problem

Inhaltsverzeichnis 1. Ziehen Sie das MySQL-Image ...

Detaillierte Schritte zur Installation von ros2 in Docker

Inhaltsverzeichnis Hauptthema 1. Installieren Sie...

Detaillierte Analyse der Kompilierung und Installation von vsFTP 3.0.3

Details zur Sicherheitsanfälligkeit VSFTP ist ein...

Implementierung von webpack-dev-server zum Erstellen eines lokalen Servers

Inhaltsverzeichnis Vorwort Webpack-Deb-Server Sta...

Zusammenfassung der CSS-Methoden zum Löschen von Floats

Float wird häufig im Layout von Webseiten verwend...

Tutorial zur Installation von VMWare15.5 unter Linux

Um VMWare unter Linux zu installieren, müssen Sie...

Zusammenfassung der Berechtigungsprobleme bei gespeicherten MySQL-Prozeduren

Ja, gespeicherte MySQL-Prozeduren scheinen sehr s...

Lösung für den Fehler beim Importieren von MySQL Big Data in Navicat

Die von Navicat exportierten Daten können nicht i...

Methode und Einführung der Tabellenindexdefinition in MySQL

Überblick Ein Index ist eine vom DBMS basierend a...

Warum sollten Sie mit der add_header-Direktive von Nginx vorsichtig sein?

Vorwort Wie wir alle wissen, legt die Nginx-Konfi...

Detaillierte Erklärung der Rolle des Schlüssels in React

Inhaltsverzeichnis Frage: Wird die Farbe des Bere...

Unsere Gedanken zur Karriere als UI-Ingenieur

Ich bin seit langer Zeit depressiv, warum? Vor ein...