Bilde over bilde - CSS

[Tonny Kluften]

Nederst på Villmark og Fritid | Villmark og Fritid | Villmark og Fritid skal bildet som nå ligger bakerst dekke det foran, de to bildene som ligger på hverandre skal altså bytte plass.
Hvordan kan jeg få til det?

Bruker nå:

.text-boks img {
clear: both;
float:left;
overflow: hidden;
background: transparent;
width: 70px;
height: 70px;
padding: 0px;
margin: 0 5px 0 0;
border: 0px solid #999999;
position:relative;
z-index: -1;
}


#overlay-hjem {
width: 80px; height: 80px;
background: url(images/thumb-overlay-hjem.png) no-repeat;
position:relative;
z-index: 999;
float:left;
}

 

[stianweb]

Jeg viller hatt en div for bakerste bilde, med en ny div igjen for hovedbildet.
Bruker så margin på div to, for å få den sentrert.

Noe slikt:

<div id="bakgrunn">
<div id="hovedbilde">
<img>
</div>
</div>

Håper du forstår, noen pedagog er jeg ikke

 

[Tonny Kluften]

Er ikke sikker på om jeg forstår, men å sentrere er ikke noe problem. Problemet er at det bildet som nå ligger bakerst (transparent bilde med skygge) skal ligge foran.

 

[Sjefskoder]

Flytt det frem eller tilbake med z-index

z-index:-1; /*bak*/
z-index:1;/*over*/

mer om z-index her
Leste ikke igjennom hele tråden, men tror at dette kan funke for ditt "problem"

 

[Tonny Kluften]

Jeg bruker allerede z-index:

.text-boks img {
background: transparent;
border: 0px solid #999999;
clear: both;
float:left;
height: 70px;
margin: 0 5px 0 0;
overflow: hidden;
padding: 0px;
width: 70px;
position:absolute;
z-index: -1;
}

#overlay-hjem {
background: url(images/thumb-overlay-hjem.png) no-repeat;
position:relative;
height: 80px;
width: 80px;
z-index: 999;
}

 

[Robin Johansen]

Lagde noe kjapt nå som funker, vet ikke hvordan kodene dine ser ut, men jeg la en div utenfor bilde og en div til "forgrunnsbildet" eller skyggen.

.hovedbilde {
overflow:hidden;
float:left;
margin:4px;}

.hovedbilde img {
display:block;
width:80px;
height:80px;
float:left;
z-index:0;}
.skyggebilde {
z-index:1;
position:absolute;
background:url('skygge.png');
width:80px;
height:80px;}

<div class="hovedbilde">
<img src="bilde1.png" />
<div class="skyggebilde"></div>
</div>

 

[Tonny Kluften]

Nydelig Robin, det fungerte som ei kule

 

[Tonny Kluften]

Hei. Det ble ikke bra i IE såklart...
I IE så legger skyggebildet seg ved siden av bildet. I FF legger det seg som det skal, skulle gjerne hatt en løsning for dette.