|
|||
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) |
Sponsored Links |
|
|||
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; }
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. Geändert von explanator (18.04.2013 um 17:50 Uhr) |
Sponsored Links |
|
|||
Zitat:
https://developer.mozilla.org/en-US/docs/CSS/transform Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
|
|||
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! |
|
|||
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. |
|
|||
Zitat:
Solche simplen transforms kann man durchaus jetzt bereits einsetzen, die werden breit unterstützt. edit: Zitat:
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (18.04.2013 um 19:08 Uhr) |
Stichwörter |
hover, z-index, zoomen |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |