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