Bonjour à tous !

Voici mon souci, et mon code

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
.rectangle_titre
{
border: 10px solid black; border-radius: 33px;
text-align: center;
line-height: 118px;
font-family: Arial;
font-size: 30px;
height: 118px;
width: 900px;
color: black;
background-color: #00d059;
}
 
.encadrement_rectangle_2video
{height: 300px;width: 940px;
}
.rectangle_video_haut_gauche,
.rectangle_video_haut_droite,
.rectangle_video_bas_gauche,
.rectangle_video_bas_droite
{
transition: width 1s, height 1s;
-moz-transition: width 1s, height 1s;
-webkit-transition: width 1s, height 1s;
-o-transition: width 1s, height 1s;
border: 10px solid black; border-radius: 33px; margin: 15px; margin-left:0px;
height: 250px;
width: 425px;
text-align: left;
background-color: #0090FF;
}
.rectangle_video_haut_gauche,.rectangle_video_bas_gauche{float: left;}
.rectangle_video_haut_droite,.rectangle_video_bas_droite{float: right;}
 
.rectangle_video_haut_gauche img,
.rectangle_video_haut_droite img,
.rectangle_video_bas_gauche img,
.rectangle_video_bas_droite img
{
width:425px; height:250px; border-radius:23px;
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-o-filter: hue-rotate(0deg);
transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.rectangle_video_haut_gauche:hover,
.rectangle_video_haut_droite:hover,
.rectangle_video_bas_gauche:hover,
.rectangle_video_bas_droite:hover
{height: 524px; width: 900px;}
 
.rectangle_video_haut_gauche:hover img,
.rectangle_video_haut_droite:hover img,
.rectangle_video_bas_gauche:hover img,
.rectangle_video_bas_droite:hover img
{height: 100px; width: 170px; border-radius:24px
filter: hue-rotate(50deg);
-webkit-filter: hue-rotate(50deg);
-moz-filter: hue-rotate(50deg);
-o-filter: hue-rotate(50deg);
}
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
<div class="rectangle_titre">PROGRAMMES DE LOGOS DE FOOT POUR Ti 82 Stats.fr</div>
 
<div class="encadrement_rectangle_2video">
<div class="rectangle_video_haut_gauche"><img src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/OL.gif"></div>
<div class="rectangle_video_haut_droite"><img src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/OM.gif"></div>
</div>
 
<div class="encadrement_rectangle_2video">
<div class="rectangle_video_bas_gauche"><img src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/PSG.gif"></div>
<div class="rectangle_video_bas_droite"><img src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/Saint%20%C3%A9tienne.gif"></div>
</div>

J'aimerai que lorsque je survole un élément, celui-ci se met au premier plan par rapport aux autres, il paraît que ça se résout avec le z-index mais je ne sais pas comment l'appliquer sur mon code. Merci d'avance.