Thumbnail-Hover-Effekt mit CSS3 implementiert

<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>

@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;
	}
}