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 :
Après :
Voici mon code à présent :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Merci d'avance à tous ceux qui vont pouvoir m'aider, cela m'aiderai vraiment !
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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; }
Partager