Hover mit img position

[onsight]

Hallo,

zum hover effect via background image gibt es ja hunderte Tutorials. Für meine Variante hab ich noch nichts gefunden, obwohl es sicher auch was gibt:

Ich möchte einen Hover-Effekt durch Position des Images. Das jpg/png enthält also beide Zustände übereinander. Mit background images ist das gängig. Geht das aber auch für Bilder, die man via html einbindet?

also sinngemäß:

Code: Alles auswählen

<div class="imagecontainer">
<img src="image.png>
</div>

mit

image.jpg (100x200px)

und CSS:

Code: Alles auswählen

.imagecontainer img {
    width: 100px;
    heigt: 100 px;
    overflow:hidden;
    position: 0px;
}

imagecontainer img:hover {
    position: -100px;
}

Ganz so klappt das noch nicht.

danke für Tipps
gruß
onsight

[djheke]

Hallo,
img haben für diesen Zweck nichts im HTML zusuchen.
Ich glaube du brauchst das hier Gilder/Levin

[onsight]

hmm, naja, es geht nicht um Navigation, sonder im Grunde um eine Art von Image-Gallery.

[onsight]

ps und daher würde ich die images ganz gern aus dem CSS rauslassen, weil ich sonst für jedes Bild einen CSS Eintrag bräuchte

[djheke]

Na dann, musst du dein imagecontainer relativ positionieren und deine bilder absolut.