/*-----------------*/
/***** Hera ******/
/*-----------------*/
figure.effect-hera {
background: #303fa9; /*couleur fond*/
}
figure.effect-hera h2 { /*titre*/
width: 40%; /*largeur*/
}
figure.effect-hera h2,
figure.effect-hera p { /*titre et paragraphe*/
position: absolute;
top: 50%; /*positions*/
left: 50%;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0); /*transformation : translationHV*/
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
figure.effect-hera figcaption::before { /*figcaption pseudo-élément pour dessiner le cadre*/
position: absolute;
top: 50%; /*positions*/
left: 50%;
width: 12rem; /*largeur*/
height: 12rem; /*hauteur*/
border: .2rem solid #fff; /*épaisseur nature couleur 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(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1); /*transformation : translationHV rotation échelle*/
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
figure.effect-hera p { /*paragraphe*/
width: 12rem; /*largeur*/
font-size:2rem; /*taille police -icones-*/
}
figure.effect-hera p a { /*icones du paragraphe*/
color: #fff; /*couleur*/
}
figure.effect-hera p a:hover,
figure.effect-hera p a:focus { /*icones du paragraphe au survol*/
color: rgba(254,74,65,0.8); /*couleur et opacité*/
}
figure.effect-hera p a icone { /*icones du paragraphe*/
opacity: 0; /*opacité*/
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
}
figure.effect-hera p a:nth-child(1) icone { /*icone1*/
position: absolute;
top: -6rem; /*positions*/
left: 0rem;
}
figure.effect-hera:hover p a:nth-child(1) icone { /*icone1 au survol*/
-webkit-transform: translate3d(3rem,3rem,0);
transform: translate3d(3rem,3rem,0); /*transformation : translationHV*/
}
figure.effect-hera p a:nth-child(2) icone { /*icone2*/
position: absolute;
top: -6rem; /*positions*/
right: 0rem;
}
figure.effect-hera:hover p a:nth-child(2) icone { /*icone2 au survol*/
-webkit-transform: translate3d(-3rem,3rem,0);
transform: translate3d(-3rem,3rem,0); /*transformation : translationHV*/
}
figure.effect-hera p a:nth-child(3) icone { /*icone3*/
position: absolute;
top: 4rem; /*positions*/
left: 0rem;
}
figure.effect-hera:hover p a:nth-child(3) icone { /*icone3 au survol*/
-webkit-transform: translate3d(3rem,-3rem,0);
transform: translate3d(3rem,-3rem,0); /*transformation : translationHV*/
}
figure.effect-hera p a:nth-child(4) icone { /*icone4*/
position: absolute;
top: 4rem; /*positions*/
right: 0rem;
}
figure.effect-hera:hover p a:nth-child(4) icone { /*icone4 au survol*/
-webkit-transform: translate3d(-3rem,-3rem,0);
transform: translate3d(-3rem,-3rem,0); /*transformation : translationHV*/
}
figure.effect-hera:hover p a icone { /*icones du paragraphe au survol*/
opacity: 1; /*opacité*/
}
figure.effect-hera:hover figcaption::before { /*figcaption pseudo-élément au survol*/
opacity: 1; /*opacité*/
-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1); /*transformation : translationHV rotation échelle*/
}
figure.effect-hera:hover h2 { /*titre au survol*/
opacity: 0; /*opacité*/
-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1); /*transformation : translationHV échelle*/
}
/*-----------------*/
/****** Kira ******/
/*-----------------*/
figure.effect-kira {
background: #fff; /*couleur fond*/
text-align: left; /*alignement*/
}
figure.effect-kira img { /*image*/
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s; /*temps de transition*/
}
figure.effect-kira figcaption {
z-index: 1;
}
figure.effect-kira h2 { /*titre*/
margin:1rem 2rem 0; /*marges extérieures*/
}
figure.effect-kira p { /*paragraphe*/
padding: 1.5rem 3rem; /*marges intérieures*/
font-size: 2rem; /*taille police -icones-*/
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,-1rem,0);
transform: translate3d(0,-1rem,0); /*transformation : translationV*/
}
figure.effect-kira p a { /*icones du paragraphe*/
margin: 0 1rem; /*marges extérieures*/
color: #101010; /*couleur*/
}
figure.effect-kira p a:hover,
figure.effect-kira p a:focus { /*icones du paragraphe au survol*/
color: rgba(254,74,65,0.8); /*couleur et opacité*/
}
figure.effect-kira figcaption::before { /*figcaption pseudo-élément créant le bandeau du titre*/
position: absolute;
top: .5rem; /*positions*/
right: 2rem;
left: 2rem;
z-index: -1;
height: 4rem; /*hauteur*/
background: #fff; /*couleur*/
content: ''; /*NE PAS SUPPRIMER*/
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s; /*temps de transition*/
-webkit-transform: translate3d(0,5rem,0) scale3d(1,0.023,1) ;
transform: translate3d(0,5rem,0) scale3d(1,0.023,1); /*transformation : translationV échelle*/
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
figure.effect-kira:hover img { /*image au survol*/
opacity: 0.7; /*opacité*/
}
figure.effect-kira:hover p { /*paragraphe au survol*/
opacity: 1; /*opacité*/
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0); /*transformation : translation0*/
}
figure.effect-kira:hover figcaption::before { /*figcaption pseudo-élément au survol*/
opacity: 0.7; /*opacité*/
-webkit-transform: translate3d(0,4rem,0) scale3d(1,1,1) ;
transform: translate3d(0,4rem,0) scale3d(1,1,1); /*transformation : translationV échelle*/
}