Mouse over bilder

Hallo,

bei dem beigefügten Quellcode wird das 2. Bild vergrößert. Wie kann man dies verhindern, so das also ein 2. Bild in gleicher Normalgrösse erscheint?

Im Voraus vielen Dank

meilott

CSS:
a.info{
position:relative;
z-index:1;
color:#000;
text-decoration:none}

a.info:hover{z-index:2;}

a.info span{
display: none;
}

a.info:hover span{
display:block;
position:absolute;
background-image: url(Bild2.jpg);
top:50px; left:20px;width:350px; height:350px;
}

HTML:

Hallo meilott,

das bild2 in das span-element in ein img-tag schreiben und background aus dem span rausnehmen

a.info:hover span{
display:block;
position:absolute;
background-image: url(Bild2.jpg);
top:50px; left:20px;width:350px; height:350px;
}

background-size ist in CSS3 vorgesehen, aber hat ja noch Arbeits-Status :smile:)

Gruß
Klaus

Hallo Klaus,

hat geklappt, danke. Jedoch ist nun, wenn die Maus auf Bild1 ist, Bild2 unterhalb von Bild1. Was ist zu tun, damit Bild2 wieder teilweise über Bild1 liegt?

Hallo meilott,

hat geklappt, danke. Jedoch ist nun, wenn die Maus auf Bild1
ist, Bild2 unterhalb von Bild1. Was ist zu tun, damit Bild2
wieder teilweise über Bild1 liegt?

wieder?
Du hast doch dem span-element display:none gegeben
und nur bei hover wird dann dieses span-element angezeigt.
wenn die mouse weg ist … ist auch das span-element incl. Bild weg

ich weiß jetzt nicht was du meinst und wie es aussehen soll.

Gruß
Klaus