-50%
Le deal à ne pas rater :
-50% Baskets Nike Air Huarache
64.99 € 129.99 €
Voir le deal

Partagez
 

 Remise d'Award sur votre forum

Aller en bas 
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 !  I love you


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

Jamy
Jamy
ex-staffienne
 
Remise d'Award sur votre forum
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Ajouter une police à votre forum
» Passer votre commande de gifs (C)
» Passer votre commande de vidéo
» Era Tenebris /Forum RPG/ PA - Aels.
» Devenir Partenaire

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Avada Kedagraph :: Section Codage :: Libre Service :: Codes pour le RP-
Sauter vers: