@cad-k

<center><style>#nap {width: 250px; height: 400px; box-shadow: 1px 1px 2px #757575; position: relative; overflow: hidden; } .hat {width: 250px; height: 400px; background: url(https://2img.net/h/oi58.tinypic.com/fbz72e.png); position: absolute; top: 0px;} #nap:active .hat { top: -400px; } .cleek { width: 250px; text-align: center; position: absolute; top: 172px; left: 0px; font-family: oswald; text-transform: uppercase; color: #ccc; font-size: 9px; opacity: 0; transition: all 1s ease-in; -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -o-transition: all 1s ease-in; -ms-transition: all 1s ease-in; } #nap:hover .cleek { opacity: 1; } .werds { width: 240px; padding: 5px; background: #252525; opacity: 0.7; color: #fff; position: relative; top: 250px; opacity: 0;} #nap:active .werds {opacity: 0.7;} </style>

   <div id="nap" style="background: url(VOTRE IMAGE/GIF EN 250x445);"><div class="hat">
   <div style="width: 20px; height: 20px; background: #FF4040; border-radius: 5px; position: absolute; top: 150px; left: 80px;"></div><div style="font-family: oswald; font-size: 15px; text-transform: uppercase; position: absolute; top: 150px; left: 105px; line-height: 150%;"> VOTRE PSEUDO</div>
   <div class="cleek">Click and Hold to View</div>
   </div>
   <div class="werds">VOTRE TEXTE ICI</div></div>
   <div style="width: 250px; padding: 5px 0px; text-transform: uppercase; text-align: right;"><a href="http://shine.jcink.net/index.php?showuser=5438">thanks emilie :cloud:</a></div>
   </center>