css image andere image voledig overlappen

Door christian k op 24-05-2014 13:11

1.924 views

hallo iedereen,

ik zou graag willen dat het lijkt alsof er 3 fotos gestappelt zijn daarom heb ik dit script gemaakt
maar op een of andere manier lukt het me niet om de fotos voledig te overlappen hij wil niet verder als
50px overlappen daarna gaat de foto niet verder meer omhoog
dit is mijn css:


div.fotofr
{
   padding: 3px;
   float: left;
   margin: 3px;
   width: 101px;
   height: 96px;
   border-radius: 4px;
}
div.fotofr:hover 
{
   background-color: #70B1C1;
}
div.foto
{
   background-color: #dddddd;
   padding: 3px;
   width: 95px; 
   height: 95px;
}            
.fotoname 
{    
   display: block;
   overflow: hidden;
   text-align: center;
}
.foto1
{
   border: 3px solid grey;
   z-index: 1;
   margin-top: -65px;
   -ms-transform:rotate(0deg);
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg);
}
.foto2
{
   border: 3px solid grey;
   z-index: 0;
   margin-top: -50px;
   -ms-transform:rotate(355deg);
   -webkit-transform:rotate(355deg);
   transform:rotate(355deg);
}
.foto3
{
   border: 3px solid grey;
   z-index: -1;
   -ms-transform:rotate(5deg);
   -webkit-transform:rotate(5deg);
   transform:rotate(5deg);
}
</style>

en dit de html


<div class="fotofr">
<div class="foto">
<img class="foto3" src="image2.jpg" width="90" height="65;">
<img class="foto2" src="image1.jpg" width="90" height="65">
<img class="foto1" src="image.jpg" width="90" height="65">
<span class="fotoname">foto test</span>
</div>
</div>

weet iemand wat het probleem is?

Eschwin Moerkerken

12-06-2014 14:44 gewijzigd op 12-06-2014 14:44

Ik raad je aan om gebruik te maken van position:absolute; zodat je ze bovenop elkaar kunt leggen, je maakt ook gebruik van z-index maar dit heeft geen nut als het element waar je dit aan meegeeft geen position anders dan relative meegeeft.

voorbeeld:
http://jsbin.com/ligul/1/watch


.foto1
{
   border: 3px solid grey;
   z-index: 1;
   top:7px; /* toegevoegd */
   position:absolute; /* toegevoegd */
   -ms-transform:rotate(0deg);
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg);
}
.foto2
{
   border: 3px solid grey;
   z-index: 0;
   top:7px; /* toegevoegd */
   position:absolute; /* toegevoegd */
   -ms-transform:rotate(355deg);
   -webkit-transform:rotate(355deg);
   transform:rotate(355deg);
}
.foto3
{
   border: 3px solid grey;
   z-index: -1;
   top:7px; /* toegevoegd */
   position:absolute; /* toegevoegd */
   -ms-transform:rotate(5deg);
   -webkit-transform:rotate(5deg);
   transform:rotate(5deg);
}

Reageren

Inloggen om te reageren