Tipps für Zoomeffekt gesucht! Klappt nicht so ganz...

Stadtmensch · #1 (**permalink**) 18.04.2013, 16:50

Hallo!
Ich versuche mich gerade an einem Zoomeffekt, siehe anhängender Code und Link. Es ist eine horizontale Liste mit Bildern, die bei hover größer werden.

Allerdings klappt es noch nicht so ganz, wie ich es mir vorstelle!
1) Das Zoomen beim Hovern soll nicht von der oberen, linken Ecke der Bilder starten, sondern von der Mitte aus. Ich müsste die Bilder als bei hover ein Stück nach links und oben ziehen. Jemand eine Idee dazu?

2) Der Z-Index tut auch nicht das, was ich mir vorgestellt habe. Img normal ist z-index 1 und img:hover ist z-index 2. Trotzdem überlappt das gezoomte Bild nicht so wie gedacht.

3) Was passiert eigentlich seltsames mit der horizontalen hr-Leiste?

Live-Beispiel hier: test

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" dir="ltr" lang="en-gb">
	<head><title>test</title>
		<style type="text/css">
			body{background:green}
			img {z-index:1;width:100%}
			#listencontainer{height:162px}
			#liste li img:hover{width:250px !important;box-shadow: 1px 1px 24px rgba(0, 0, 0, 1);z-index:2 !important}
			ul {display:inline}
			li {float:left;width:200px}
		</style>
	</head>
	<body>
		<br />
		<br />
		<br />
		<hr>
		<div id="listencontainer">
			<ul id="liste">
				<li><img src="testbild.gif"  alt=""  /></li>
				<li><img src="testbild.gif"  alt=""  /></li>
				<li><img src="testbild.gif"  alt=""  /></li>
				<li><img src="testbild.gif"  alt=""  /></li>
			</ul>
		</div>
		<hr>
	</body>
</html>

explanator · #2 (**permalink**) 18.04.2013, 17:48

z-index brauchst du hier nicht, kannst du rausnehmen.
!important kannst du rausnehmen, ist nicht notwendig.
UL dann padding und margin auf 0 oder so wie du es haben willst.
UL auf display:block stellen.
Die Listenaufzählungspunkte hast du noch drin, würde ich auch entfernen.
Listenelemente bei hover auf position relative setzen und mit margin-top soweit nach oben ziehen dass es mittig dargestellt wird.

Beispiel:

Code:

#liste li img:hover {
    width: 250px;
    box-shadow: 1px 1px 24px rgb(0, 0, 0);
    position: relative;
    margin-top: -20px;
}

Da du alle Listenelemente mit float:left nach links geschoben hast, brauchst du anschliessend noch ein clear oder clearfix, hierzu mal guggeln, das schaffst du schon.

Stadtmensch · #3 (**permalink**) 18.04.2013, 17:51

Danke, das probier ich gleich mal aus!

fricca · #4 (**permalink**) 18.04.2013, 18:30

Zitat:

Zitat von Stadtmensch

Ich versuche mich gerade an einem Zoomeffekt, siehe anhängender Code und Link. Es ist eine horizontale Liste mit Bildern, die bei hover größer werden.

Dafür ist transform:scale() wie geschaffen.
https://developer.mozilla.org/en-US/docs/CSS/transform

Zitat:

3) Was passiert eigentlich seltsames mit der horizontalen hr-Leiste?

Was findest du denn seltsam? Dass sie dem jeweils vergrößerten, floatenden li ausweicht?

Stadtmensch · #5 (**permalink**) 18.04.2013, 18:58

Ja, das mit dem Ausweichen fand ich zuerst seltsam.
Die Sache mit dem CSS-transform find ich ganz interessant. Ich werde das sicher mal einsetzen, sobald das überall ohne Browserprefix funktioniert!

explanator · #6 (**permalink**) 18.04.2013, 18:59

Ist es denn ratsam transform schon einzusetzen? Der Hinweis bei Mozilla auf Experementierphase lässt böses vermuten. Bei Flexbox haben sie ja auch 2 mal richtig was geändert.

Ansonsten ist transform ja richtig mächtig um schöne Effekte herzustellen, gerade im Bereich Schrift.

fricca · #7 (**permalink**) 18.04.2013, 19:02

Zitat:

Ich werde das sicher mal einsetzen, sobald das überall ohne Browserprefix funktioniert!

Warum erst dann?
Solche simplen transforms kann man durchaus jetzt bereits einsetzen, die werden breit unterstützt.

edit:

Zitat:

Bei Flexbox haben sie ja auch 2 mal richtig was geändert.

Das ist nicht vergleichbar. Bei den transforms haben Microsoft, Mozilla und Opera bereits die Prefixes entfernt -- da ist nicht zu erwarten, dass sich noch groß etwas tut.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JS/ HTML/ CSS Frontend Entwickler und IE6 Vernachlässiger in Hannover gesucht	joocom	Jobs	0	12.07.2012 11:59
PHP Entwickler Hannover gesucht	joocom	Jobs	0	12.07.2012 11:57
Tipps gesucht für Alternative zu Iframes im 3-spaltigen CSS-Layout	the.redeemer	CSS	4	18.10.2007 12:39
Quelle für Webshopbewertungen gesucht	stefankrueger.org	Ressourcen	8	04.07.2007 15:23
Bitte um überprüfen des Codes und Tipps	Edelstahl	Site- und Layoutcheck	7	05.03.2006 17:08