css image andere image voledig overlappen
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)
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
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>
{
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)
1
2
3
4
5
6
7
8
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>
<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?
voorbeeld:
http://jsbin.com/ligul/1/watch
Code (php)
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
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);
}
{
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