Discussion :

[ParisElliot]

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>

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;
        }

Merci d'avance à tous ceux qui vont pouvoir m'aider, cela m'aiderai vraiment !

[Bachibouzooo]

Bonjour;
D'après de vieux souvenirs, mettre une image en "hover" n'est possible qu'en javascript... Peut-être que CSS3 peut le faire mais il me semble que non.

[ParisElliot]

Pourtant sur le tutoriel cela marche et c'est en CSS. De plus, dans mon code cela marche aussi, seulement la mise en page change radicalement. Et le problème est la.
Merci de ta réponse en tout cas, je me trompe peut être.

[Invité]

Bonjour,
il faut simplifier ton code = factoriser ce qui peut l'être -> ajout de la class"prez", commune aux 4 boites :

Code css :

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
#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;
}
 
.prez
{
	position:relative;
	margin: 10% 3.1% 0; /* positionnement des boites */
	width: 15%;
	display: inline-block;
	overflow: hidden;
	background-color: black;
}
/* positionnement des boites 1 et 4 */
.prez1
{
	margin-left: 10%;
}
.prez4
{
	margin-right: 10%;
}
 
/* images */
.prez img
{
	max-width: 90%;  
	margin: 5% 5% 0;
	width: 90%;    
}
 
.prez img.top
{
	position:absolute;
	left:0; top:0; right: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;
}
 
.prez:hover img.top 
{
	opacity:0;
}
 
.prez p
{
	font-family: caviar_dreamsregular;
	padding-top: 5%;
	padding-bottom: 5%;
	padding-left: 5%;
	color: white;
}

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
32
33
34
<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="prez prez1">
					<img class="top" src="images/banane.jpg" alt="" title=""/>
					<img class="bottom" src="images/in.jpg" alt="" title=""/>
					<p class="texteprez">Jordan<br><br>blablablablablabla</p>
				</div>
 
				<div class="prez">
					<img class="top" src="images/banane.jpg" alt="" title=""/>
					<img class="bottom" src="images/in.jpg" alt="" title=""/>
					<p class="texteprez">Jordan<br><br>blablablablablabla</p>
				</div>
 
				<div class="prez">
					<img class="top" src="images/banane.jpg" alt="" title=""/>
					<img class="bottom" src="images/in.jpg" alt="" title=""/>
					<p class="texteprez">Jordan<br><br>blablablablablabla</p>
				</div>
 
				<div class="prez prez4">
					<img class="top" src="images/banane.jpg" alt="" title=""/>
					<img class="bottom" src="images/in.jpg" alt="" title=""/>
					<p class="texteprez">Jordan<br><br>blablablablablabla</p>
				</div>
		    	</div>
		</div>    	
	</div>
</section>

Cela suppose quand même que les 2 images aient au moins les mêmes proportions pour bien se superposer.

N.B. J'espère que ce n'est pas toi qu'on devine sur la photo "après" ...

[ParisElliot]

Merci beaucoup à toi jreaux62 c'est exactement ce que je voulais !

N.B. Ce n'est pas moi, en effet j'aurais pris la même arme