Fiche de liens.
→ Cadre de liens assortis.
Gif → ici.
Le gif utilisé doit être d'au moins 500px de largeur si vous voulez qu'il prenne toute la place.
La première capture est le cadre que l'on voit tout le temps. Et si on passe la souris dessus, magie ! Le cadre de la deuxième capture apparaît !

Cliquez pour voir l'image en taille réelle.

Code:

<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'><center><div style="border: 1px dotted #66ccff; background: #ffffff; display: inline-block; overflow: hidden; height: 300px; width: 500px; padding: 5px; color: #660066; font-family: Arial;" class="fili" ><div><p style="background: url('http://31.media.tumblr.com/5ea2e3360f76451c9b16787cdc51fac4/tumblr_nnfm0rsuxv1u597kno8_500.gif') no-repeat center;" class="fili" ><span style="font-size: 4em; font-family: 'Kaushan Script', cursive; text-shadow: 1px 1px 2px #ffffff;">Prénom P² Nom </span></p>
<p class="filicadre" ><span style="font-size: 20px; font-family: 'Kaushan Script', cursive; text-shadow: 1px 1px 1px #660066;">Qui suis-je ? </span>

Bric à brac d'informations, âge, orientation sexuelle, lieu de résidence, points importants de votre histoire... Bref, ce que vous êtes.

</p><p class="filicadre" ><span style="font-size: 20px; font-family: 'Kaushan Script', cursive; text-shadow: 1px 1px 1px #660066;">Wanted </span>

+ BFF stands for Best Friends Forever (♂/♀)
+ Coloc ? (♂/♀)
+ Familia (♂/♀)
+ Nemesis (♂/♀)
+ Sois pas jaloux mon chou (♂/♀)
+ Hé, c'est l'heure de sortir ! (♂/♀)
+ Protecteur (♂/♀)
+ Ta tête me revient pas (♂/♀)

</p>
[right][size=10]© Fiche : Joy, Gif : Joy [/size][/right]
</div></div></center>

<style>p.fili { display: table-cell; vertical-align: middle; width: 500px; height: 300px; } div.fili > div { transition: all 1.5s ease; } div.fili:hover > div { margin-top: -315px; } p.filicadre { border: 1px dotted #66ccff; height: 280px; width: 240px; display: inline-block; margin: 0px 2px; padding: 2px; text-align: justify; overflow: auto; }
</style>