css image andere image voledig overlappen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Christian k

christian k

24/05/2014 13:11:42
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<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?
 
PHP hulp

PHP hulp

28/03/2024 19:34:20
 
Eschwin Moerkerken

Eschwin Moerkerken

12/06/2014 14:44:12
Quote Anchor link
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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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);
}
Gewijzigd op 12/06/2014 14:44:32 door Eschwin Moerkerken
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.