2 pièce(s) jointe(s)
Changement image au hover
Bonjour à tous,
J'aurai besoin de vos lumière concernant un souci que je rencontre actuellement lors du développement d'un site.
Alors voila, j'ai une page de présentation de la team. Sur celle-ci, 4 image sont présentes sur la même ligne et je souhaiterai que lors d'un simple hover sur l'une d'elle, une autre image la remplace. J'ai trouvé une solution (que voici en demo 1 : http://css3.bradshawenterprises.com/cfimg/) qui me correspond totalement puisque je n'utilise pas la propriété background-image.
Voici mon problème : Lorsque j'applique cette modification à mon code, les images s'affichent coupées au 3/4 environ, ce que je n'arrive pas a comprendre et à résoudre... Voici le résultat avant et après :
Avant :
Pièce jointe 173003
Après :
Pièce jointe 173004
Voici mon code à présent :
Code:
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
| <section id="slide-5" class="homeSlide">
<div class="bcg">
<div class="hsContainer">
<div class="hsContent">
<div id="team">
<div class="titreslide5"><h1>TEAM</h1></div>
</div>
<div class="prez1">
<img class="top" src="img/prez.jpg" alt="" title=""/>
<img class="bottom" src="img/prez1.jpg" alt="" title=""/>
<p class="texteprez">Jordan<br><br>blablablablablabla</p>
</div>
<div class="prez2">
<img src="img/prez.jpg" alt="" title=""/>
<p class="texteprez">Jordan<br><br>blablablablablabla</p>
</div>
<div class="prez3">
<img src="img/prez.jpg" alt="" title=""/>
<p class="texteprez">Jordan<br><br>blablablablablabla</p>
</div>
<div class="prez4">
<img src="img/prez.jpg" alt="" title=""/>
<p class="texteprez">Jordan<br><br>blablablablablabla</p>
</div>
</div>
</div>
</div>
</section> |
Code:
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
| #slide-5 .bcg
{
background-image:url('../img/bcg_slide-5.jpg')
}
.titreslide5
{
margin-top: 5%;
font-family: caviar_dreamsregular;
font-size: 2vw;
margin-left: 67%;
letter-spacing: 1.2em;
}
.prez1 img, .prez2 img, .prez3 img, .prez4 img
{
width:100%;
max-width: 100%;
padding-top: 5%;
padding-left: 5%;
padding-right: 5%;
width: 90%;
}
.prez1 img
{
position:absolute;
left: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.prez1 img.bottom:hover
{
opacity:0;
}
.prez1
{
margin-left: 10%;
}
.prez2
{
margin-left: 6.2%;
margin-right: 3.3%;
}
.prez3
{
margin-left: 3.3%;
margin-right: 6.2%;
}
.prez4
{
margin-right: 10%;
}
.prez1, .prez2, .prez3, .prez4
{
display: inline-block;
overflow: hidden;
position: relative;
}
.prez1, .prez2, .prez3, .prez4
{
margin-top: 10%;
width: 15%;
background-color: black;
}
.prez1 p, .prez2 p, .prez3 p, .prez4 p
{
font-family: caviar_dreamsregular;
padding-top: 5%;
padding-bottom: 5%;
padding-left: 5%;
color: white;
} |
Merci d'avance à tous ceux qui vont pouvoir m'aider, cela m'aiderai vraiment !
