zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Tipps für Zoomeffekt gesucht! Klappt nicht so ganz...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.04.2013, 16:50
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Ort: Hamburg
Beiträge: 60
Stadtmensch befindet sich auf einem aufstrebenden Ast
Standard Tipps für Zoomeffekt gesucht! Klappt nicht so ganz...

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>

Geändert von Stadtmensch (18.04.2013 um 17:32 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.04.2013, 17:48
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard Kurzanleitung

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.

Geändert von explanator (18.04.2013 um 17:50 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.04.2013, 17:51
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Ort: Hamburg
Beiträge: 60
Stadtmensch befindet sich auf einem aufstrebenden Ast
Standard

Danke, das probier ich gleich mal aus!
Mit Zitat antworten
  #4 (permalink)  
Alt 18.04.2013, 18:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von Stadtmensch Beitrag anzeigen
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?
Mit Zitat antworten
  #5 (permalink)  
Alt 18.04.2013, 18:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 25.07.2006
Ort: Hamburg
Beiträge: 60
Stadtmensch befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #6 (permalink)  
Alt 18.04.2013, 18:59
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #7 (permalink)  
Alt 18.04.2013, 19:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.

Geändert von fricca (18.04.2013 um 19:08 Uhr)
Mit Zitat antworten
Antwort

Stichwörter
hover, z-index, zoomen

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:06 Uhr.