|
|||
Fluides IMG beim hovern zoomen
Hallo!
Ich würde gern bei einem <img> beim hovern einen Zoomeffekt einbauen, ohne dass sich dabei die Außenmaße verändern. Wenn das <img> feste Pixelmaße hätte, wäre das auch gar kein Problem; aber leider soll es in ein fluides Layout eingebaut werden, so dass ich keine konkrete Höhe definieren kann. Ich habe den Aufbau hier mal auf die entscheidenden Elemente reduziert dargestellt, so dass mein Wunsch hoffentlich deutlich wird: Edit fiddle - JSFiddle Durch das "overflow:hidden" bekomme ich zwar die anwachsende Breite in den Griff, nicht aber die anwachsende Höhe. Gibt es dafür eine Lösung? Vielen Dank im Voraus für eure Hilfe! PS: Die Originalbilder sind natürlich nicht alle quadratisch, sondern haben unterschiedliche Formate.
__________________
Gruß schatzi Geändert von schatzi (10.09.2014 um 21:37 Uhr) |
Sponsored Links |
|
|||
Hallo schatzi,
ich sage mal Nein. Aber vielleicht so: Edit fiddle - JSFiddle Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>test</title> <style type="text/css"> * { margin: 0; padding: 0; } #content{ background: lime; width: 80%; margin: 0 auto; overflow: hidden; min-width: 500px; } figure{ float: right; width: 60%; } figure img{ width: 100%; -webkit-transition: 1s; transition: 1s; vertical-align: bottom; } figure img:hover{ width: 110%; margin-bottom: -10%; } article{ float: left; width: 40%; } </style> </head> <body> <div id="content"> <figure> <img src="http://www.lorempixel.com/200/200" alt="Hi"> </figure> <article> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> </article> </div> </body> </html> MfG Roland Geändert von K.Roland (11.09.2014 um 04:05 Uhr) |
Sponsored Links |
|
|||
O.K. Dan sollte schatzi nicht vergessen zu clearen.
@: schatzi Teste selbst mal, indem du Content eine Hintergrundfarbe gibst. oder: Code:
} #content{ background: lime; border: 4px solid #000; padding: 10px; } MfG Roland |
|
|||
Hallo!
Klar, im Original cleart der #content natürlich; das hatte ich versehentlich im jsFiddle vergessen. Die Idee mit dem negativen Margin ist in der Tat sehr clever und ich werde sie auf jeden Fall im Hinterkopf behalten. Allerdings funktioniert diese Idee natürlich nur dann richtig gut, wenn das Bild quadratisch ist. Bei Bildern im Quer- oder Hochkant-Format klappt das dann leider nicht mehr vernünftig... Dennoch natürlich vielen Dank für diesen Vorschlag! Vielleicht kann ich den mal bei einem anderen Projekt verwenden.
__________________
Gruß schatzi |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
rahmen um bilder- was mache ich falsch? | R0sa | CSS | 3 | 19.11.2012 17:35 |
Dreamweaver zerreist Listenstruktur in Vorschau | ICurtius | Site- und Layoutcheck | 9 | 15.10.2012 11:44 |
Responsive webdesign: horizontales Menü mit angepasster Schriftgröße | Spencer | Javascript & Ajax | 3 | 19.09.2012 00:16 |
CSS Links border-bottom auf Img ausschalten nicht möglich? | Andimau | CSS | 1 | 15.06.2012 18:00 |
ie. Abstand über horizontaler Navi geht nicht weg. | tifi | CSS | 5 | 21.11.2006 18:17 |