Img:hover Position verändern

[the_zoker_09]

Hallo zusammen,

Ich habe ein Problem:

Ich möchte eine Position eines Bilder über ein hover verändern.
Mit "background-poisition" in einem div geht das ja ganz leicht.

Ich kann das Bild aber nicht als "background" verwenden, weil ich sonst kein Link drüber setzten kann. (ausser man kann mit CSS neuerdings Links setzten )

Also muss ich das ganze über ein normales "img" lösen.

Aber sowas funktioniert ja leider nicht:

<div id="bildcontainer">
     <a href="link"><img src="/bild.jpg"></a>
</div>


#bildcontainer img {
     position: -34px bottom;
}

#bildcontainer img:hover {
    position: 0 bottom;
}

Aber genau sowas brauch ich.

Wie kann ich das am besten lösen?

Vielen Dank
the_zoker_09

 

[agund]

Ich bin der Meinung das ich sowas mal so gelößt habe:

<a href="link"><div id="bildcontainer"><img src="/bild.jpg"></div></a>

jedoch ist es nicht valide.... aber gehen tut es das wenn es valide sein soll dan lass die div weg...

 

[the_zoker_09]

Es geht mir ja um das hover und das geht mit der Lösung nicht ;)

 

[agund]

aso ok...

<div id="bildcontainer" style="background-image: url(/bild.jpg);"></div>

#bildcontainer:hover{
background-image: url(/bild2.jpg);
}

 

[the_zoker_09]

mit dem hover soll eine Position verschoben werden (wie oben beschrieben) und auf dem Bild soll ein Link liegen

 

[agund]

ICh glaube ich verstehe dich nicht so ganz....
Was willst du ? Soll das bild reinscrollen?
Oder nur auftauchen wenn man mit der mouse drüber geht?

Weil wenn du es reinscrollen willst, musst du das mit JS machen und die position langsam stück für stück verschieben...
Wenn es nur um das Anzeigen geht würde ich das bild einfach überschreiben.... bzw. ändern

 

[the_zoker_09]

Nein das eigentliche bild ist doppelt so breit wie das, das angezeigt wird.

Wenn man nichts macht, wird die erste Hälfte angezeigt und wenn man mit der Maus drüber geht, wird der zweite Teil angezeigt.
So braucht man für ein hover mit Bildwechsel nur ein Bild

 

[agund]

Warum so umständlich ?
OK, verstehe es aber jetzt...


<div id="bildcontainer">
<a href="link"><img id="pic" src="/bild.jpg"></a>
</div>

#pic {
margin-bottom: -34px ;
}

#pic:hover
{
margin-bottom: 0px;
}

geht das denn so nicht?

 

[the_zoker_09]

Mit nem margin hab ichs nocht nicht ausprobiert, werds aber mal versuchen

 

[threadi]

Das passt aber nicht ganz zu:

Wenn man nichts macht, wird die erste Hälfte angezeigt und wenn man mit der Maus drüber geht, wird der zweite Teil angezeigt.
So braucht man für ein hover mit Bildwechsel nur ein Bild

Was Du beschreibst wird "CSS Sprite" genannt. Dort wird es allerdings auf Hintergrundbilder angewendet. Wieso musst Du unbedingt das Bild als <img> einfügen? Darauf kannst Du in dem Fall durchaus verzichten, es sei denn das Bild soll auch eine semantische Bedeutung haben.

Wenn Du unbedingt das <img> behalten willst, positioniere es per absoluter Positionierung innerhalb des Links neu. Außerdem solltest Du für den Link eine feste Höhe und Breite geben. Umständlich im Vergleich zu der Hintergrund-Möglichkeit.