a:hover Bild vergrößern

[Emundo]

Ich habe ein Bild auf meiner Site, was ich durch a:hover vergrößern möchte. Nachteil: Das kleine Bild bekomme ich nicht HINTER das große:?:

a {
display:block;
}

a:hover {
background-image:url(jpg/Bild_gross.jpg); 
width:400px;
height:300px; 
}

div.bild {
position:absolute; 
top:500px;
left:300px;
}

<div class="bild">
<a href="#">   
  <img src="Bild_klein.jpg" style="border:none;  
    width:160px; height:130px;">
 </a>
</div>

Was kann man da machen?
Großes Fragezeichen;-)

 

[waterwebdesign]

AW: a:hover Bild vergrößern

Variante 1: Du könntest das Bild ausblenden lassen.

a:hover img  {display: none;}

Variante 2: Du skalierst das Bild quasi im Browser, sprich du hasst eine Bilddatei, die einmal klein und einmal groß angezeigt wird. Allerdings könnte das dann unschön aussehen (Bildabhängig).

a img{width: 160px; height: 130px;}
a:hover img{width: 400px; height: 300px;}

Variante 3: Im Normalzustand ist das Bild auch schon ein Hintergrundbild, welches dann bei a:hover ausgetauscht wird.

So gesehen, gibt es viele Weg nach Rom

 

[dafoxx]

AW: a:hover Bild vergrößern

idee:
z-index.
dieser beschreibt die anordnungvon vorne nach hinten.
-> kleinem bild einen kleineren zindex geben als den anderen, schon passts.
ansonsten wie schon beschrieben mit display:none arbeiten.

 

[Emundo]

AW: a:hover Bild vergrößern

@waterwebdesign:
Hat SOFOT geklappt mit a:hover img {display:none;}

;-)

@dafoxx: Leider hat das nicht funktioniert, da ich für das kleine und große Bild das gleiche div nehme;-) Vielen Dank

: