Créer un site internet

Animations

Image tourne avec texte

Effet 1

 

This is your Content Place.

Click on Me

<div class="box ef1"><img src="IMAGE.jpg" />
<div class="contentPart">

<p>This is your Content Place.</p>

<a href="#">Click on Me</a></div>
</div>

 

Effet 2

 

This is your Content Place.

Click on Me

<div class="box ef2"><img src=""IMAGE.jpg" />
<div class="contentPart">
<p>This is your Content Place.</p>
<a href="#">Click on Me</a></div></div>

 

 

CSS :

    .box {
    width: 45%;
    display: inline-block;
    background-color: #484848;
    width: 330px;
    height: 186px;
    vertical-align: top;
    margin: 2%;
}
.box {
    position: relative;
}
.box img {
    width: 100%;height: 100%;
    object-fit: fill;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

/* effect 1 */
.ef1 .contentPart {
    position: absolute;
    top: 0px;left: 0px;
    width: 100%;height: 100%;
    background-color: #343637;
    opacity: 0;
    transition:all 0.4s;
}
.ef1 .contentPart:hover {
    opacity: 0.8;
    top: 3%;
    left: 4%;
}
.ef1 .contentPart p {
    color: #fff;
    letter-spacing: 0px;
    margin-top: 32px;
    font-size: 20px;
    margin-bottom: 24px;
}
.ef1 .contentPart a {
    color: #fff;
    letter-spacing: 0px;
    font-size: 18px;
}

/* effect 2 */
.ef2 {
    overflow: hidden;
}
.ef2 .contentPart {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: #343637;
    opacity: 1;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}
.ef2:hover .contentPart {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
}
.ef2:hover img {
    transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
}
.ef2 .contentPart p {
    color: #fff;
    letter-spacing: 0px;
    margin-top: 32px;
    font-size: 20px;
    margin-bottom: 24px;
}
.ef2 .contentPart a {
    color: #fff;
    letter-spacing: 0px;
    font-size: 18px;
}
/* Media Querys */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .box {
        width: 95%;
    }
}
 

Texte animé

Surinami

 


Avec titre h4 :

Les-Tutoriels.com


<div class="grid__item color-2">

<a class="link link--surinami" href="#"><span data-letters-l="Les-Tuto" data-letters-r="riels.com">Les-Tutoriels.com</span></a>
</div>

Avec titre h4 :

<h4 class="grid__item color-2"><a class="link link--surinami" href="#"><span style="font-size:20px;"><span data-letters-l="Les-Tutoriels" data-letters-r=".com">Les-Tutoriels.com</span></span></a></h4>

Yaku


Normal :


Avec titre h4 :

v o i r

Sans fond de couleur :


Normal :

<div class="grid__item color-11">

<a class="link link--yaku" href="#">
<span>v</span><span>o</span><span>i</span><span>r</span></a></div>

Avec titre h4 :
<h4 class="grid__item color-11"><a class="link link--yaku" href="#">
<span style="font-size:36px;">v</span>

<span style="font-size:36px;">o</span>
<span style="font-size:36px;">i</span>

<span style="font-size:36px;">r</span>

</a></h4>

Sans fond de couleur :
<div class="grid__item">

<a class="link link--yaku2" href="#">
<span>v</span><span>o</span><span>i</span><span>r</span> </a></div>

Pour enlever la couleur de fond enlever le « color-11 »

Takiri

 

<div class="grid__item">
<a class="link link--takiri" href="#">Les-Tutoriels <span>Bienvenue sur le site</span></a>
</div>

Kumya

 

 

<p><span style="font-size:50px; "> </span></p>

<div class="grid__item"><span style="font-size:50px; "><a class="link link--kumya" href="#"><span data-letters="Kumya">Kumya</span></a></span></div>

<p>&nbsp;</p>

<p><span style="font-size:50px; "><span style="font-size:50px; "> </span> </span></p>

CSS

EFFET GENERAL :

.grid__item {
position: relative;
 z-index: 1;
 display: inline-block;
 overflow: hidden;
padding: 10px;
 text-align: center;
 cursor: pointer;
    position: relative;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-transform: translate3d(0,0,0); /* Solves Safari bug because of SVG clipping mask */
}
.grid__item p {
    color: #777;
}

/* Background colors */
.color-1 { background: #E8E0DA; }
.color-2 { background: #343637; }
.color-3 { background: #383A35; }
.color-4 { background: #333; }
.color-5 { background: #fda9a9; }
.color-7 { background: #cde7d3; }
.color-8 { background: #DCECDD; }
.color-9 { background: #dedbba; }
.color-10 { background: #222; }
.color-11 { background: #515151; }

/* Related demos */
.content--related {
    padding: 3em 0;
    text-align: center;
    font-weight: bold;
}
.media-item {
    display: inline-block;
    padding: 1em;
    vertical-align: top;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;

}
.media-item__img {
    max-width: 100%;
    opacity: 0.3;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
    opacity: 1;
}
    
@media screen and (max-width: 40em) {
    .codrops-header h1 {
        font-size: 10px; /* Taille texte */
    }

}

/* General link styles */
.link {
    outline: none; /* TEXTE LIEN */
    text-decoration: none;
    position: relative;
line-height: 2;
    color: #9e9ba4;
    display: inline-block;
}

 

/* INDIVIDUAL EFFETS*/

 Surinami 


/* Surinami */

.link--surinami::before,
.link--surinami::after {
    content: '';
    width: 100%;
    height: 1px;
    z-index: -1;
    background: #ffffff;
    position: absolute;
    -webkit-transform: scale3d(0,1,1);
    transform: scale3d(0,1,1);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.link--surinami::before {
    right: 0;
    top: 0;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}

.link--surinami::after {
    left: 0;
    bottom: 0;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

.link--surinami:hover::before,
.link--surinami:hover::after {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

.link--surinami span {
    position: relative;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
}

.link--surinami:hover span {
    color: transparent;
}

.link--surinami span::before,
.link--surinami span::after {
    position: absolute;
    color: #dd4747;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

.link--surinami span::before {
    content: attr(data-letters-l);
    left: 0;
    -webkit-transform: translate3d(-5px,0,0);
    transform: translate3d(-5px,0,0);
}

.link--surinami span::after {
    content: attr(data-letters-r);
    right: 0;
    -webkit-transform: translate3d(5px,0,0);
    transform: translate3d(5px,0,0);
}

.link--surinami:hover span::before,
.link--surinami:hover span::after {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

Yaku

/* Yaku */
.link--yaku {
    color: #D3D3D3;
    font-weight: 400;
    text-transform: uppercase;
    overflow: hidden;
    padding: 0 0 0px;
}

.link--yaku::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    border-width: 1px 0;
    border-color: #343637; /*couleur du trait*/
    border-style: solid;
    left: 0;
    -webkit-transform: translate3d(-101%,0,0);
    transform: translate3d(-101%,0,0);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.link--yaku:hover::before {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.link--yaku span {
    display: inline-block;
    position: relative;
    -webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
    transform: perspective(1000px) rotate3d(0,1,0,0deg);
    -webkit-transition: -webkit-transform 0.5s, color 0.5s;
    transition: transform 0.5s, color 0.5s;
}

.link--yaku:hover span {
    color: #dd4747; /*couleur du texte au passage de la souris*/
    -webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
    transform: perspective(1000px) rotate3d(0,1,0,360deg);
}

.link--yaku span:nth-child(4),
.link--yaku:hover span:first-child {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.link--yaku span:nth-child(3),
.link--yaku:hover span:nth-child(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.link--yaku span:nth-child(2),
.link--yaku:hover span:nth-child(3) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.link--yaku span:first-child,
.link--yaku:hover span:nth-child(4) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

Yaku2

/* Yaku2 */
.link--yaku2 {
    color: #343637;
    font-weight: 400;
    text-transform: uppercase;
    overflow: hidden;
    padding: 0 0 0px;
}

.link--yaku2:hover::before {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.link--yaku2 span {
    display: inline-block;
    position: relative;
    -webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
    transform: perspective(1000px) rotate3d(0,1,0,0deg);
    -webkit-transition: -webkit-transform 0.5s, color 0.5s;
    transition: transform 0.5s, color 0.5s;
}

.link--yaku2:hover span {
    color: #dd4747; /*couleur du texte au passage de la souris*/
    -webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
    transform: perspective(1000px) rotate3d(0,1,0,360deg);
}

.link--yaku2 span:nth-child(4),
.link--yaku2:hover span:first-child {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.link--yaku2 span:nth-child(3),
.link--yaku2:hover span:nth-child(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

.link--yaku2 span:nth-child(2),
.link--yaku2:hover span:nth-child(3) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.link--yaku2 span:first-child,
.link--yaku2:hover span:nth-child(4) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}


Takiri

/* Takiri */
.link--takiri {
    font-style: italic;
    font-weight: 700;
    font-size: 5em; /* Taille du texte */
    padding: 0 10px 20px;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
}

.link--takiri:hover {
    color: #1e1a1b;
}

.link--takiri::before {
    content: '';
    position: absolute;
    height: 36px;
    width: 120%;
    top: 50%;
    margin-top: -18px;
    left: -10%;
    z-index: -1;
    background: #dfdfdf; /*Couleur du trait*/
    -webkit-transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
    transform: rotate3d(0,0,1,45deg) scale3d(0,1,1);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.link--takiri:hover::before {
    -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
    transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

.link--takiri span {
    font-size: 20%;
    font-weight: 400;
    position: absolute;
    right: 15px;
    color: #dd4747;
    bottom: 0;
    opacity: 0;
    -webkit-transform: translate3d(-10px,-10px,0);
    transform: translate3d(-10px,-10px,0);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

.link--takiri:hover span {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

kumya

/* Kumya */
.link--kumya {
    overflow: hidden;
    padding: 10px 10px 0;
    line-height: 1;
    color: #343637;
}

.link--kumya:hover {
    color: #343637;
}

.link--kumya::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    z-index: -1;
    background: #242424;
    -webkit-transform: translate3d(101%,0,0);
    transform: translate3d(101%,0,0);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kumya:hover::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.link--kumya span {
    display: block;
    position: relative;
}

.link--kumya span::before {
    content: attr(data-letters);
    position: absolute;
    color: #fff;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    width: 0%;
    -webkit-transition: width 0.5s;
    transition: width 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kumya:hover span::before {
    width: 100%;
}
 

 

<p style="text-align: center;">
<div class="ij-effect-20">

<p style="text-align: center;"><a href="#"><span data-hover="Effect 20">Effect 20</span></a></p>
</div>

 

<div class="cl-effect-2" id="cl-effect-2">
<p style="text-align: center;"><a href="http://www.les-tutoriels.com/"><span data-hover="Ratatouille">Ratatouille</span></a></p>
</div>

CSS

CSS Effect 20 :

.ij-effect-20 a {
    line-height: 2em;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
}

.ij-effect-20 a span {
    position: relative;
    display: inline-block;
    padding: 3px 15px 0;
    background: #de4747;
    box-shadow: inset 0 3px #2f4351;
    -webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    transition: background 0.6s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}

.ij-effect-20 a span::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #dfdfdf;
    color: #000000;
    content: attr(data-hover);
    -webkit-transform: rotateX(270deg);
    -moz-transform: rotateX(270deg);
    transform: rotateX(270deg);
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
}

.ij-effect-20 a:hover span,
.ij-effect-20 a:focus span {
    background: #000000;
}

.ij-effect-20 a:hover span::before,
.ij-effect-20 a:focus span::before {
    -webkit-transform: rotateX(10deg);    
    -moz-transform: rotateX(10deg);
    transform: rotateX(10deg)

/* Read more: ibrahimjabbari.com

CSS Effect 2 :

.cl-effect-2 a {
    line-height: 44px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    color: #ffffff;
}

.cl-effect-2 a span {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    background: #343637;
    color: #ffffff;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.cl-effect-2 a span::before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #343637;
    color: #ffffff;
  font-weight: bold;
    content: attr(data-hover);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
    -webkit-transform: rotateX(90deg) translateY(-22px);
    -moz-transform: rotateX(90deg) translateY(-22px);
    transform: rotateX(90deg) translateY(-22px);
}

.cl-effect-2 a:hover span::before,
.cl-effect-2 a:focus span::before {
    background: #9c9c9c;    
}
 

img14

 

Durée

Voir le tutoriel

VOIR

 

Zoe


<div class="grid">

<figure class="effect-zoe"><img alt="img14" src="IMAGE.png" />

<figcaption>

<p>&nbsp;</p>

<h2><span style="font-size:14px;">Dur&eacute;e</span></h2>

<p>Voir le <span>tutoriel</span></p>

<p><a href="http://www.les-tutoriels.com/" style="background-color: rgb(255, 255, 255); display: inline !important;">VOIR</a></p>

</figcaption>
</figure></div>

img14

 

Voir le tutoriel

VOIR

 

Bubba


<div class="grid">
<figure class="effect-bubba"><img alt="img14" src="IMAGE.png" />

<figcaption>

<p>&nbsp;</p>

<p>Voir le <span>tutoriel</span></p>

<p><a href="http://www.les-tutoriels.com/" style="background-color: rgb(255, 255, 255); display: inline !important;">VOIR</a></p>
</figcaption></figure></div>

img14

 

TEST

Voir le tutoriel

VOIR

 

Romeo

<div class="grid">
<figure class="effect-romeo"><img alt="img14" src="IMAGE.png" />

<figcaption>

<p>&nbsp;</p>

<h2>TEST</h2>

<p>Voir le <span>tutoriel</span></p>

<p><a href="http://www.les-tutoriels.com/" style="background-color: rgb(0, 0, 0); display: inline !important;">VOIR</a></p>

</figcaption>
</figure></div>

img14

Voir le tutoriel
Voir
le tutorielVoir le tutorielVoir le tutoriel

VOIR

 

Milo

 

<div class="grid">
<figure class="effect-milo"><span style="font-size:12px;"><img alt="img14" src="IMAGE.png" /></span>

<figcaption>

<p><span style="font-size:12px;"></span></p>

<p><span style="font-size:12px;">Voir le tutoriel<br />
Voir<br />le tutorielVoir le tutorielVoir le tutoriel</span></p>
<p><span style="font-size:12px;"><a href="http://www.les-tutoriels.com/" style="background-color: rgb(0, 0, 0); display: inline !important;">VOIR</a></span></p>

</figcaption>
</figure></div>

img27

Duke is very bored. When he looks at the sky, he feels to run.

 

Duke

<div class="grid">
<figure class="effect-duke"><img alt="img27" src="IMAGE.jpg" />

<figcaption>

<p>Duke is very bored. When he looks at the sky, he feels to run.</p>
</figure></div>

img14

test

 

Voir le tutoriel

VOIR

 

Sadie

<div class="grid">
<figure class="effect-sadie"><img alt="img14" src="IMAGE.png" />

<figcaption>

<h2>test</h2>

<p>&nbsp;</p>

<p>Voir le <span>tutoriel</span></p>

<p><a href="http://www.les-tutoriels.com/" style="background-color: rgb(0, 0, 0); display: inline !important;">VOIR</a></p>

</figcaption>
</figure></div>

img12

Altruistic Lexi

Each and every friend is special. Lexi won't hide a single cookie.

View more

 

Lexi

 

<div class="grid">
<figure class="effect-lexi"><span style="font-size:10px;"><img alt="img12" src="IMAGE.jpg" /></span>

<figcaption>

<h2><span style="font-size:16px;">Altruistic Lexi</span></h2>

<p><span style="font-size:10px;"><span style="font-family:Roboto Mono;">Each and every friend is special. Lexi won&#39;t hide a single cookie.</span></span></p>

<span style="font-size:10px;"><a href="http://www.les-tutoriels.com/">View more</a></span></figcaption>
</figure></div>

img14

test

testtest

VOIR

 

Oscar

<div class="grid">
<figure class="effect-oscar"><img alt="img14" src="Image.png" />

<figcaption>

<h2><span style="color:#4e5f70;">test</span></h2>

<p>testtest</p>

<p><a href="http://www.les-tutoriels.com/" style="background-color: rgb(0, 0, 0); display: inline !important;">VOIR</a></p>

</figcaption>
</figure></div>

img09

Funny Ming

Ming sits in the corner the whole day. She's into crochet.

 

Ming

<div class="grid">
<figure class="effect-ming"><span style="font-size:10px;"><img alt="img09" src="IMAGE.jpg" /></span>

<figcaption><br />

<span style="font-size:16px;">Funny Ming</span>

<p><span style="font-size:10px;">Ming sits in the corner the whole day. She&#39;s into crochet.</span></p>

</figcaption>
</figure></div>

img14

test

testtest

VOIR

 

Ruby

 

<div class="grid">
<figure class="effect-ruby"><img alt="img14" src="IMAGE.png" />

<figcaption>

<h2>test</h2>

<p>testtest</p>

<p><a href="http://www.les-tutoriels.com/" style="background-color: rgb(0, 0, 0); display: inline !important;">VOIR</a></p>

</figcaption>
</figure></div>

img24

Cute Moses

VOIR

View more

 

Moses

<div class="grid">
<figure class="effect-moses"><span style="color:#ffffff;"><span style="font-size:10px;"><img alt="img24" src="IMAGE.jpg" /></span></span>

<figcaption>

<h2><span style="color:#ffffff;"><span style="font-size:16px;">Cute Moses</span></span></h2>

<p><span style="color:#ffffff;"><span style="font-size:10px;">VOIR</span></span></p>

<a href="http://www.les-tutoriels.com/">View more</a></figcaption>

</figure>
</div>

img14

test

VOIR

 

Honey

<div class="grid">
<figure class="effect-honey"><span style="color:#4e5f70;"><img alt="img14" src="IMAGE.png" /></span>

<figcaption>

<h2><span style="color:#4e5f70;">test</span></h2>

<p><a href="http://www.les-tutoriels.com/" style="background-color: rgb(0, 0, 0); display: inline !important;"><span style="color:#4e5f70;">VOIR</span></a></p>

</figcaption>
</figure></div>

img29

Lonely Steve

Steve was afraid of the Boogieman.

View more

 

Steve

 

<div class="grid">
<figure class="effect-steve">

<img src="IMAGE.jpg" alt="img29"/>

<figcaption>

<h2>Lonely <span>Steve</span></h2>

<p>Steve was afraid of the Boogieman.</p>

<a href="http://www.les-tutoriels.com/">View more</a>
</figcaption> </figure></div>

img14

Passionate Julia

Julia dances in the deep dark

She loves the smell of the ocean

And dives into the morning light

 

Julia

<div class="grid">
<figure class="effect-julia"><img alt="img14" src="IMAGE.png" />

<figcaption>

<h2><span style="font-size:18px;"><span style="color:#ffffff;">Passionate Julia</span></span></h2>

<p><span style="font-size:16px;">Julia dances in the deep dark</span></p>

<p><span style="font-size:16px;">She loves the smell of the ocean</span></p>

<p><span style="font-size:16px;">And dives into the morning light</span></p>
</figcaption></figure></div>

img23

Thoughtful Goliath

When Goliath comes out, you should run.

 

Goliath

<div class="grid">
<figure class="effect-goliath"><img alt="img23" src="IMAGE.jpg" />

<figcaption>

<h2>Thoughtful <span>Goliath</span></h2>

<p>When Goliath comes out, you should run.</p>
</figcaption></figure></div>

img16

Noisy Terry

test

 

Terry

 

<div class="grid">
<figure class="effect-terry"><span style="color:#ffffff;"><img alt="img16" src="IMAGE.jpg" /></span>

<figcaption>

<h2><span style="color:#ffffff;">Noisy Terry</span></h2>

<a href="#"><i class="fa fa-fw fa-download"></i></a>

<p>test</p>
</figcaption></figure></div>

img18

Strong Apollo

Apollo's last game of pool was so strange.

View more

 

Apollo

<div class="grid">
<figure class="effect-apollo"><span style="font-size:10px;"><img alt="img18" src="IMAGE.jpg" /></span>

<figcaption>

<h2><span style="font-size:16px;">Strong Apollo</span></h2>

<p><span style="font-size:14px;">Apollo&#39;s last game of pool was so strange.</span></p>

<span style="font-size:14px;"><a href="#">View more</a></span></figcaption>
</figure></div>

img10

Happy Selena

Selena is a tiny-winged bird.

View more

 

Selena

<div class="grid">
<figure class="effect-selena"><img alt="img10" src="IMAGE.jpg" />

<figcaption>

<h2>Happy <span>Selena</span></h2>

<p>Selena is a tiny-winged bird.</p>

<a href="#">View more</a></figcaption>
</figure></div>

CSS

Les effets sont créés par la class .grid
Cette class .grid doit être rajouté dans Modifier / Ajouter du CSS au thème (utilisateurs avertis).

Ensuite, chaque effet "ZOE", "Bubba", "ROMEO"...  sont des effets individuels. Chaque effet à son code CSS distinct. Il faut rajouter ce code supplémentaire pour chaque effet individuel.
Code .grid :

/* Images animés */
.grid {
 overflow: hidden;
 margin: 0;
 padding: 3em 0 0 0;
 width: 100%;
 list-style: none;
 text-align: center;
}

/* Common style */
.grid figure {
 position: relative;
 z-index: 1;
 display: inline-block;
 overflow: hidden;
 margin: -0.135em;
 width: 330px;
 height: 186px;
 
 text-align: center;
 cursor: pointer;
}

.grid figure img {
 position: relative;
 display: block;
 min-height: 100%;
 opacity: 0.8;
}
  
.grid figure figcaption {
 padding: 2em;
 color: #fff;
 font-size: 11px;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
  font-family:bree serif;/*-Texte titre-*/
}

.grid figure figcaption::before,
.grid figure figcaption::after {
 pointer-events: none;
}

.grid figure figcaption,
.grid figure a {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
  
 

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure a {
 z-index: 1000;
 text-indent: 200%;
 white-space: nowrap;
 font-size: 0;
 opacity: 0;
}

.grid figure h2 {
 font-weight: 300;
}

.grid figure h2 span {
 font-weight: 800;
}

.grid figure h2,
.grid figure p {
 margin: 0;
}

.grid figure p {
 letter-spacing: 1px;
 font-size: 20px;
  family-font:arial;
}

ZOE

/*---------------*/
/***** zoe *****/
/*---------------*/  
   figure.effect-zoe {
    background: #333333; /*couleur fond*/
}
  figure.effect-zoe img { /*image*/
    opacity: 1; /*opacité*/
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s; /*temps de transition*/
}
  figure.effect-zoe:hover img { /*image au survol*/
    opacity: 0.8; /*opacité*/
}
  
figure.effect-zoe figcaption {
    top: auto;
    bottom: 0;
    padding: 2px;
    height: 25px;
  border: 0px solid grey;
    background: #ffffff;
    color: #3c4a50;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.1s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
 
}
  

figure.effect-zoe h2 {
    float: left;
}

figure.effect-zoe figcaption > span {
    float: right;
  
}

figure.effect-zoe p {
    position: absolute;
    bottom: 0em;
    padding: 0px;
  margin: 10px;
    color: #fff;
    text-transform: none;
    font-size: 14px; /*-Taille 2e texte-*/
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    transition: opacity 1.4s;
}

figure.effect-zoe h2,
figure.effect-zoe figcaption > span {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
}

figure.effect-zoe figcaption > span::before {
    display: inline-block;
    padding: 2px;
    font-family: 'feathericons';
  font-size:15px;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-eye::before {
    content: '\e000';
}

.icon-paper-clip::before {
    content: '\e001';
}

.icon-heart::before {
    content: '\e024';
}

figure.effect-zoe h2 {
    display: inline-block;
}

figure.effect-zoe:hover p {
    opacity: 1;
  margin:25px 5px;
}
  
figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover figcaption > span {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-zoe:hover figcaption > span:nth-child(4) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

figure.effect-zoe:hover figcaption > span:nth-child(3) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

figure.effect-zoe:hover figcaption > span:nth-child(2) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}


BUBBA

/*---------------*/
/***** Bubba *****/
/*---------------*/

figure.effect-bubba {
    background: #000000;
}

figure.effect-bubba img {
        opacity: 1;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
    opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}

figure.effect-bubba h2 {
    padding-top: 30%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
    padding: 20px 2.5em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}


ROMEO

/*---------------*/
/***** Romeo *****/
/*---------------*/

figure.effect-romeo {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

figure.effect-romeo img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,0,50px);
    transform: translate3d(0,0,50px);
}

figure.effect-romeo:hover img {
    opacity: 0.6;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 1px;
    background: #fff;
    content: '';
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

figure.effect-romeo:hover figcaption::before {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
    transform: translate3d(-50%,-50%,0) rotate(45deg);
}

figure.effect-romeo:hover figcaption::after {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
    transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

figure.effect-romeo h2,
figure.effect-romeo p {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-romeo h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure.effect-romeo p {
    padding: 0.25em 2em;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}

figure.effect-romeo:hover h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure.effect-romeo:hover p {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}

MILO

/*---------------*/
/***** Milo *****/
/*---------------*/

figure.effect-milo {
    background: #000000;
}

figure.effect-milo img {
    width: -webkit-calc(100% + 60px);
    width: calc(100% + 60px);
    opacity: 1;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0) scale(1.12);
    transform: translate3d(-10px,0,0) scale(1.12);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-milo:hover img {
    opacity: 0.5;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
}

figure.effect-milo h2 {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1em 1.2em;
}

figure.effect-milo p {
    padding: 0 10px 0 0;
    width: 50%;
    border-right: 1px solid #fff;
    text-align: right;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0,0);
    transform: translate3d(-40px,0,0);
}

figure.effect-milo:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}


SADIE

/*---------------*/
/***** Sadie *****/
/*---------------*/

figure.effect-sadie figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(255,255,255,0.8) 75%);
    background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(255,255,255,0.8) 75%);
    content: '';
    opacity: 0;
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    color: #FFFFFF;
    -webkit-transition: -webkit-transform 0.35s, color 0.35s;
    transition: transform 0.35s, color 0.35s;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    opacity: 0;
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
    color: #000;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
    opacity: 1;
  color: #000;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

HONEY

/*---------------*/
/***** Honey *****/
/*---------------*/

figure.effect-honey {
    background: #4e4e4e;
}

figure.effect-honey img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-honey:hover img {
    opacity: 0.5;
}

figure.effect-honey figcaption::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: #343637;
    content: '';
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}

figure.effect-honey h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1em 1.5em;
    width: 100%;
    text-align: left;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

figure.effect-honey h2 i {
    font-style: normal;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

OSCAR

/*---------------*/
/***** Oscar *****/
/*---------------*/
figure.effect-oscar {
    background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}

figure.effect-oscar img {
    opacity: 1;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-oscar figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
}

figure.effect-oscar h2 {
    margin: 20% 0 10px 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

figure.effect-oscar:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-oscar:hover figcaption {
    background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
    opacity: 0.4;
}

RUBY

/*---------------*/
/***** Ruby *****/
/*---------------*/

figure.effect-ruby {
    background-color: #343637;
}

figure.effect-ruby img {
    opacity: 1;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

figure.effect-ruby:hover img {
    opacity: 0.5;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-ruby h2 {
    margin-top: 20%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-ruby p {
    margin: 1em 0 0;
    padding: 1em 0 0;
    border: 1px solid #fff;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0) scale(1.1);
    transform: translate3d(0,20px,0) scale(1.1);

figure.effect-ruby:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-ruby:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
}

JULIA

/*---------------*/
/***** Julia *****/
/*---------------*/

figure.effect-julia {
    background: #2f3238;
}

figure.effect-julia img {
    max-width: none;
    height: 400px;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 1s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-julia figcaption {
    text-align: left;
}

figure.effect-julia h2 {
    position: relative;
    padding: 0.5em 0;
}

figure.effect-julia p {
    display: inline-block;
    margin: 0 0 0.25em;
    padding: 0.4em 1em;
    background: rgba(255,255,255,0.9);
    color: #2f3238;
    text-transform: none;
    font-weight: 500;
    font-size: 75%;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-360px,0,0);
    transform: translate3d(-360px,0,0);
}

figure.effect-julia p:first-child {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

figure.effect-julia p:nth-of-type(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

figure.effect-julia p:nth-of-type(3) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-julia:hover p:first-child {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

figure.effect-julia:hover p:nth-of-type(2) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-julia:hover p:nth-of-type(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

figure.effect-julia:hover img {
    opacity: 0.4;
    -webkit-transform: scale3d(1.1,1.1,1);
    transform: scale3d(1.1,1.1,1);
}

figure.effect-julia:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

GOLIATH

/*-----------------*/
/***** Goliath *****/
/*-----------------*/

figure.effect-goliath {
    background: #df4e4e;
}

figure.effect-goliath img,
figure.effect-goliath h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-goliath img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-goliath h2,
figure.effect-goliath p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 30px;
}

figure.effect-goliath p {
    text-transform: none;
    font-size: 90%;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,50px,0);
    transform: translate3d(0,50px,0);
}

figure.effect-goliath:hover img {
    -webkit-transform: translate3d(0,-80px,0);
    transform: translate3d(0,-80px,0);
}

figure.effect-goliath:hover h2 {
    -webkit-transform: translate3d(0,-100px,0);
    transform: translate3d(0,-100px,0);
}

figure.effect-goliath:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

TERRY

/*-----------------*/
/***** Terry *****/
/*-----------------*/

figure.effect-terry {
    background: #34495e;
}

figure.effect-terry figcaption {
    padding: 1em;
}

figure.effect-terry figcaption::before,
figure.effect-terry figcaption::after {
    position: absolute;
    width: 200%;
    height: 200%;
    border-style: solid;
    border-color: #101010;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-terry figcaption::before {
    right: 0;
    bottom: 0;
    border-width: 0 70px 60px 0;
    -webkit-transform: translate3d(70px,60px,0);
    transform: translate3d(70px,60px,0);
}

figure.effect-terry figcaption::after {
    top: 0;
    left: 0;
    border-width: 15px 0 0 15px;
    -webkit-transform: translate3d(-15px,-15px,0);
    transform: translate3d(-15px,-15px,0);
}

figure.effect-terry img,
figure.effect-terry p a {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-terry img {
    opacity: 0.85;
}

figure.effect-terry h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.4em 10px;
    width: 50%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

@media screen and (max-width: 920px) {
    figure.effect-terry h2 {
        padding: 0.75em 10px;
        font-size: 120%;
    }
}

figure.effect-terry p {
    float: right;
    clear: both;
    text-align: left;
    text-transform: none;
    font-size: 111%;
}

figure.effect-terry p a {
    display: block;
    margin-bottom: 1em;
    color: #fff;
    opacity: 0;
    -webkit-transform: translate3d(90px,0,0);
    transform: translate3d(90px,0,0);
}

figure.effect-terry p a:hover,
figure.effect-terry p a:focus {
    color: #f3cf3f;
}

figure.effect-terry:hover figcaption::before,
figure.effect-terry:hover figcaption::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-terry:hover img {
    opacity: 0.6;

}

figure.effect-terry:hover h2,
figure.effect-terry:hover p a {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-terry:hover p a {
    opacity: 1;
}

figure.effect-terry:hover p a:first-child {
    -webkit-transition-delay: 0.025s;
    transition-delay: 0.025s;
}

figure.effect-terry:hover p a:nth-child(2) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-terry:hover p a:nth-child(3) {
    -webkit-transition-delay: 0.075s;
    transition-delay: 0.075s;
}

figure.effect-terry:hover p a:nth-child(4) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}


APOLLO

/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo {
    background: #3498db;
}

figure.effect-apollo img {
    opacity: 1;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(1.05,1.05,1);
    transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    content: '';
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 3em;
    padding: 0 1em;
    max-width: 150px;
    border-right: 4px solid #fff;
    text-align: right;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-apollo h2 {
    text-align: left;
}

figure.effect-apollo:hover img {
    opacity: 0.6;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

figure.effect-apollo:hover figcaption::before {
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
    opacity: 1;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

STEVE

/*-----------------*/
/***** Steve *****/
/*-----------------*/

figure.effect-steve {
    z-index: auto;
    overflow: visible;
    background: #000;
}

figure.effect-steve:before,
figure.effect-steve h2:before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #000;
    content: '';
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-steve:before {
    box-shadow: 0 3px 30px rgba(0,0,0,0.8);
    opacity: 0;
}

figure.effect-steve figcaption {
    z-index: 1;
}

figure.effect-steve img {
    opacity: 1;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: perspective(1000px) translate3d(0,0,0);
    transform: perspective(1000px) translate3d(0,0,0);
}

figure.effect-steve h2,
figure.effect-steve p {
    background: #fff;
    color: #2d434e;
}

figure.effect-steve h2 {
    position: relative;
    margin-top: 2em;
    padding: 0.25em;
}

figure.effect-steve h2:before {
    box-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

figure.effect-steve p {
    margin-top: 1em;
    padding: 0.5em;
    font-weight: 800;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(0.9,0.9,1);
    transform: scale3d(0.9,0.9,1);
}

figure.effect-steve:hover:before {
    opacity: 1;
}

figure.effect-steve:hover img {
    -webkit-transform: perspective(1000px) translate3d(0,0,21px);
    transform: perspective(1000px) translate3d(0,0,21px);
}

figure.effect-steve:hover h2:before {
    opacity: 0;
}

figure.effect-steve:hover p {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

MOSES

/*-----------------*/
/***** Moses *****/
/*-----------------*/

figure.effect-moses {
    background: -webkit-linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
    background: linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
}

figure.effect-moses img {
    opacity: 0.85;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-moses h2,
figure.effect-moses p {
    padding: 20px;
    width: 50%;
    height: 50%;
    border: 2px solid #fff;
}

figure.effect-moses h2 {
    padding: 20px;
    width: 50%;
    height: 50%;
    text-align: left;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(10px,10px,0);
    transform: translate3d(10px,10px,0);
}

figure.effect-moses p {
    float: right;
    padding: 20px;
    text-align: right;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

figure.effect-moses:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-moses:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-moses:hover img {
    opacity: 0.6;
}

MING

/*---------------*/
/***** Ming *****/
/*---------------*/

figure.effect-ming {
    background: #030c17;
}

figure.effect-ming img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-ming figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(1.4,1.4,1);
    transform: scale3d(1.4,1.4,1);
}

figure.effect-ming h2 {
    margin: 20% 0 10px 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-ming p {
    padding: 1em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

figure.effect-ming:hover h2 {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

figure.effect-ming:hover figcaption {
    background-color: rgba(58,52,42,0);
}

figure.effect-ming:hover img {
    opacity: 0.4;
}

LEXI

/*---------------*/
/***** Lexi *****/
/*---------------*/

figure.effect-lexi {
    background: -webkit-linear-gradient(-45deg, #000 0%,#fff 100%);
    background: linear-gradient(-45deg, #000 0%,#fff 100%);
}

figure.effect-lexi img {
    margin: -10px 0 0 -10px;
    max-width: none;
    width: -webkit-calc(100% + 10px);
    width: calc(100% + 10px);
    opacity: 0.9;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(10px,10px,0);
    transform: translate3d(10px,10px,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-lexi figcaption::before,
figure.effect-lexi p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-lexi figcaption::before {
    position: absolute;
    right: -100px;
    bottom: -100px;
    width: 300px;
    height: 300px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 900px rgba(255,255,255,0.2);
    content: '';
    opacity: 0;
    -webkit-transform: scale3d(0.5,0.5,1);
    transform: scale3d(0.5,0.5,1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

figure.effect-lexi:hover img {
    opacity: 0.6;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-lexi h2 {
    text-align: left;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(5px,5px,0);
    transform: translate3d(5px,5px,0);
}

figure.effect-lexi p {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 1.5em 1.5em 0;
    width: 140px;
    text-align: right;
    opacity: 0;
    -webkit-transform: translate3d(20px,20px,0);
    transform: translate3d(20px,20px,0);
}

figure.effect-lexi:hover figcaption::before {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

figure.effect-lexi:hover h2,
figure.effect-lexi:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

DUKE

/*---------------*/
/***** Duke *****/
/*---------------*/

figure.effect-duke {
    background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
    background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
}

figure.effect-duke img,
figure.effect-duke p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-duke:hover img {
    opacity: 0.1;
    -webkit-transform: scale3d(2,2,1);
    transform: scale3d(2,2,1);
}

figure.effect-duke h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}

figure.effect-duke p {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 20px;
    padding: 30px;
    border: 2px solid #fff;
    text-transform: none;
    font-size: 90%;
    opacity: 0;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
    -webkit-transform-origin: 50% -100%;
    transform-origin: 50% -100%;
}

figure.effect-duke:hover h2,
figure.effect-duke:hover p {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

/* Media queries */
@media screen and (max-width: 50em) {
    .content {
        padding: 0 10px;
        text-align: center;
    }
    .grid figure {
        display: inline-block;
        float: none;
        margin: 10px auto;
        width: 100%;
    }
}

SELENA

/*-----------------*/
/***** Selena *****/
/*-----------------*/

figure.effect-selena {
    background: #fff;
}

figure.effect-selena img {
    opacity: 0.95;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

figure.effect-selena:hover img {
    -webkit-transform: scale3d(0.95,0.95,1);
    transform: scale3d(0.95,0.95,1);
}

figure.effect-selena h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-selena p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
    transform: perspective(1000px) rotate3d(1,0,0,90deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

figure.effect-selena:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-selena:hover p {
    opacity: 1;
    -webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
    transform: perspective(1000px) rotate3d(1,0,0,0);
}
 

Ajouter un commentaire