Différents plans de div

Version imprimable

Bonjour à tous !

Voici mon souci, et mon code

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
.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:

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.

Bonjour,

avec un positionnement en absolute (parent en relative) vous obtenez cela :

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
.encadrement_rectangle_2video {
	position: relative;
	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 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;
	z-index:2;
}
.rectangle_video_haut_gauche{
	position:absolute;
	top:0;
}
.rectangle_video_haut_droite{
	position:absolute;
	top:0;
	right:0;
}
.rectangle_video_bas_gauche{
	position:absolute;
	bottom:0;
	left:0;
}
.rectangle_video_bas_droite{
	position:absolute;
	bottom:0;
	right:0;
}
.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);
}

http://codepen.io/anon/pen/bCqIF

26/08/2013, 10h31
pito2901

Merci super ! Mais y'a t-il moyen que lorsque qu'on ne survole plus le block haut gauche, il reste au premier plan, càd devant les 3 autre blocks.
Pour le haut droite, qu'il reste devant sur les 2 du bas et enfin le block bas gauche reste au dessus du bas droite. Je dis bien lorsque le hover se désactive.
est-ce possible ?
31/08/2013, 15h10
NoSmoking

Bonjour,

Citation:

Mais y'a t-il moyen que lorsque qu'on ne survole plus le block haut gauche

aucune chance avec une simple directive :hover en CSS.

D'un autre coté comment comptes tu accéder aux éléments qui seront de ce fait masqués par celui au premier plan ?