/*---------------*/
/**** Roxy *****/
/*---------------*/
figure.effect-roxy {
background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%); /*couleur fond*/
}
figure.effect-roxy img { /*image*/
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
-webkit-transform: scale(1.3) translate3d(-3rem,0, 0);
transform: scale(1.3) translate3d(-3rem,0,0); /*transformation : échelle et translationH*/
}
figure.effect-roxy figcaption::before { /*figcaption pseudo-élément pour dessiner le cadre*/
position: absolute;
top: 1rem; /*positions*/
right: 1rem;
bottom: 1rem;
left: 1rem;
border: 1px solid #fff; /*largeur, type et couleur de bordure*/
content: ''; /*NE PAS SUPPRIMER*/
opacity: 0; /*opacité*/
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
-webkit-transform: translate3d(-3rem,0,0);
transform: translate3d(-3rem,0,0); /*transformation : translationH*/
}
figure.effect-roxy figcaption {
text-align: left; /*alignement*/
}
figure.effect-roxy h2 { /*titre*/
padding: 4rem 0 1rem 3rem; /*marges intérieures*/
}
figure.effect-roxy p { /*paragraphe*/
padding:0 3rem; /*marges intérieures*/
opacity: 0; /*opacité*/
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
-webkit-transform: translate3d(-1rem,0,0);
transform: translate3d(-1rem,0,0); /*transformation : translationH*/
}
figure.effect-roxy:hover img { /*image au survol*/
opacity: 0.7; /*opacité*/
-webkit-transform: scale(1.3) translate3d(3rem,0, 0);
transform: scale(1.3) translate3d(3rem,0,0); /*transformation : échelle et translationH*/
}
figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p { /*figcaption pseudo-élément et paragraphe au survol*/
opacity: 1; /*opacité*/
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0); /*transformation : translation0*/
}
/*---------------*/
/**** Ruby *****/
/*---------------*/
figure.effect-ruby {
background-color: #17819c; /*couleur de fond*/
}
figure.effect-ruby img { /*image*/
opacity: 0.8; /*opacité*/
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
-webkit-transform: scale(1.15);
transform: scale(1.15); /*transformation : échelle*/
}
figure.effect-ruby:hover img { /*image*/
opacity: 0.5; /*opacité*/
-webkit-transform: scale(1);
transform: scale(1); /*transformation : échelle*/
}
figure.effect-ruby h2 { /*titre*/
margin-top: 25%; /*marge extérieure haute*/
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s; /*temps de transition*/
-webkit-transform: translate3d(0,2rem,0);
transform: translate3d(0,2rem,0); /*transformation : translationV*/
}
figure.effect-ruby p { /*paragraphe*/
margin: .5rem 2rem; /*marges extérieures*/
padding: 2rem 3rem; /*marges intérieures*/
border: 1px solid #fff; /*épaisseur nature et couleur bordure*/
opacity: 0; /*opacité*/
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
-webkit-transform: translate3d(0,2rem,0) scale(1.1);
transform: translate3d(0,2rem,0) scale(1.1); /*transformation : translationV et échelle*/
}
figure.effect-ruby:hover h2 { /*titre au survol*/
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0); /*transformation : translation0*/
}
figure.effect-ruby:hover p { /*paragraphe au survol*/
opacity: 1; /*opacité*/
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,0,0) scale(1); /*transformation : translation0 et échelle*/
}
/*---------------*/
/**** Sadie ****/
/*---------------*/
figure.effect-sadie figcaption::before { /*figcaption pseudo-élément créant le voile dégradé*/
position: absolute;
top: 0; /*positions*/
left: 0;
width: 100%; /*largeur*/
height: 100%; /*hauteur*/
background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); /*couleur fond*/
content: ''; /*NE PAS SUPPRIMER*/
opacity: 0; /*opacité*/
-webkit-transform: translate3d(0,50%,0);
transform: translate3d(0,50%,0); /*transformation : translationV*/
}
figure.effect-sadie h2 { /*titre*/
position: absolute;
top: 50%; /*positions*/
left: 0;
width: 100%; /*largeur*/
color: #484c61; /*couleur*/
-webkit-transition: -webkit-transform 0.35s, color 0.35s;
transition: transform 0.35s, color 0.35s; /*temps de transition*/
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0); /*transformation : translationV*/
}
figure.effect-sadie figcaption::before,
figure.effect-sadie p { /*figcaption pseudo-élément et paragraphe*/
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
}
figure.effect-sadie p { /*paragraphe*/
position: absolute;
bottom: 0; /*positions*/
left: 0;
width: 90%; /*largeur*/
padding: 1rem; /*marges intérieures*/
text-align:right; /*alignement*/
opacity: 0; /*opacité*/
-webkit-transform: translate3d(0,1rem,0);
transform: translate3d(0,1rem,0); /*transformation : translationV*/
}
figure.effect-sadie:hover h2 { /*titre au survol*/
color: #fff; /*couleur*/
-webkit-transform: translate3d(0,-4rem,0);
transform: translate3d(0,-4rem,0); /*transformation : translationV*/
}
figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p { /*figcaption pseudo-élément et paragraphe au survol*/
opacity: 1; /*opacité*/
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0); /*transformation : translation0*/
}