Bazzart archivant les LS sans réponses, n'hésitez pas à lâcher un petit mot pour montrer votre soutien même si le code est libre d'accès

NOTES:
- pour modifier les gifs, il faut modifier l'url des background de .qfirst pour le gif du dessous. Et celui de .qsec pour le gif qui apparaît naturellement.

-Pour modifier l'image qui sert de background au texte, il faut modifier le background de .inner

-La couleur et la taille du texte est modifiable dans .pappleCentral

- si vous désirez changer la taille, c'est tout à fait possible. Il faut modifier les valeurs width et height de .pappleCentral Attention cependant, la valeur que vous donnez en height doit toujours correspondre à celle du line-height de .inner, autrement le texte ne sera pas correctement centré sur la hauteur.

Code:

<link href='https://fonts.googleapis.com/css?family=Kanit:200' rel='stylesheet' type='text/css'><style>.pappleCentral{width: 400px;height: 200px;margin: 0 auto;font-size: 17px; text-align: center;color: #DFAF2C;font-variant: small-caps;font-family: 'Kanit';position: relative;} .quotes{width: 100%;} .qfirst{background: url("https://i.imgur.com/NcGdSO3.gif");background-size: cover;} .qsec{background: url("https://i.imgur.com/RvY3iYw.gif");background-size: cover;position: absolute;top:0;transition: .35s ease-out;-moz-transition: .35s ease-out;} .qsec:hover{opacity: 0;transition: .35s ease-out;-moz-transition: .35s ease-out;} .inner{line-height: 200px;background: url("https://i.imgur.com/NZxp2v6.jpg");padding: 10px 50px;opacity: .8;}</style><div class="pappleCentral"><div class="quotes qfirst"><span class="inner">Clint & Natalia</span></div><div class="quotes qsec"><span class="inner">Come on, you've always got my back.</span></div></div>

Code:

<link href='https://fonts.googleapis.com/css?family=Kanit:200' rel='stylesheet' type='text/css'><style>.pCentral{width: 270px;height: 140px;margin: 0 auto;font-size: 17px; text-align: center;color: #142b1a;font-weight: 700;font-variant: small-caps;font-family: 'Kanit';position: relative;} .quotes{width: 100%;} .pfirst{background: url("https://i.imgur.com/6hOJklv.gif");background-size: cover;} .psec{background: url("https://i.imgur.com/jOpGebY.gif");background-size: cover;position: absolute;top:0;transition: .35s ease-out;-moz-transition: .35s ease-out;} .psec:hover{opacity: 0;transition: .35s ease-out;-moz-transition: .35s ease-out;} .iner{line-height: 140px;background: url("https://i.imgur.com/7Uf8f6R.png");opacity: .5;display: inline-block;width: 100%;}</style><div class="pCentral"><div class="quotes pfirst"><span class="iner">God of Mischief</span></div><div class="quotes psec"><span class="iner">Loki, rightful king of Asgard</span></div></div>