Remise d'Award sur votre forum - Dim 23 Déc - 20:53 Remise d'Award pour votre forum Pas besoin de merci pour utiliser nos codes, nous faisons confiance à votre honnêteté pour ne pas clamer ces codes comme votre et ajouter un copyright avec le lien vers notre forum. Vous pouvez adapter couleurs-images/gifs bien évidemment ! Aussi, vous pouvez ajouter une police, n'hésitez pas à lire [ce tuto], il suffira de ne pas mettre la balise link dans votre template, mais juste avant le code dans votre réponse RP. Rendu.L'image et le nom du personnage se dévoile au hover ! Code.En 2 parties. Le CSS à mettre dans la feuille CSS dans le panneau admin. - Code:
-
.award{ display: inline-block; margin: 5px; width:200px; height:320px; background: #121212; position:relative; cursor:pointer; } .award .name{ font-size: 21px; color: #4D315E; padding: 100px 0 0; text-align:center; overflow:hidden; height:100px; } .resultat{ opacity:0; transition: 2s; height:120px; } .award:hover .resultat{ opacity:1; transition: 1s; }
.resultat img{ display: bloc; width:200px; height:320px; position: absolute; top:0; left:0; } .resultat p{ margin:0; background: #121212; position: absolute; bottom:0; left:0; width:200px; height:30px; text-align:center; font-family: 'Rouge Script'; font-size: 20px; color: #265E65; }
Et le code HTML. - Code:
-
<div class="award"><div class="name">le personnage <br/>le plus charismatique<br/>...</div><div class="resultat"><img src="https://78.media.tumblr.com/0f92dc8b4eed98a82a9458599e85ab80/tumblr_nx7ixwHe7O1qiiwoqo2_250.png" /><p>Nom Méga Super Long</p></div></div> Arya | |