Bild innerhalb eines Containers vergrößern
bearbeitet von LinuchsHallo Andreas,
ich erstelle ab und zu Flyer (auf Papier) per HTML mit vorhandenen Bildern, aus denen ich einen Ausschnitt zeigen möchte.
Der Container "platzt" nicht, wenn du ihm eine Höhe und Breite gibst und overflow:hidden setzt.
Dann verschiebe ich das Bild im Container so, dass der gewünschte Ausschnitt sichtbar ist:
~~~html
<div style="position:relative;width:100%;height:35mm;overflow:hidden;">
<img src="img/landkarte.jpg" style="width:100%;height:80mm;margin-top:-15mm;" alt="Karte" />
</div>
~~~
Nun könnte ich mit `img:hover` Breite und/oder Höhe des Bildes verändern, sogar die Ränder verschieben:
~~~css
img:hover {
width:120%;
margin-top: -10%;
margin-left: -10%;
}
~~~
... und wenn ich mich recht entsinne, kann man die Veränderung per CSS auch zeitlich verzögern, damit das Bild den Beschauer nicht "anspringt", sondern ihm freundlich entgegenkommt. Stichwort: `transition:transform ..`
Hgzh (Hoffe, geholfen zu haben), Linuchs