Fiche de Présentation à 2 Onglets, Simple mais Efficace !

Bonjour !

Aujourd'hui je vous présente mon premier code ! C'est une petite fiche avec divers transitions pour rajouter des effets stylés.

Vous trouverez une fiche en deux onglets en hover, lorsque votre souris est sur les onglets le contenu apparait !

Aperçu:

Voici le code !

À mettre dans le CSS :

Code:

.Encadrement{
  margin: auto;
  width: 806px;
  background-image: url('');
  position: relative;
  border-radius : 5px;
  border: solid 4px black;
  z-index: 1;
  transition-property: height;
  transition-duration: 0.5s;
  -webkit-transition-property: height;
  -webkit-transition-duration: 0.5s;
  position: relative;
}
.prez_title {
    width: 400px;
    height: 140px;
    line-height: 140px;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    color: black;
    font-weight: lighter;
    font-family: 'Times';
    color: black;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 30px;
}
.info_rpg,
.info_irl {
    width: 806px;
    overflow: hidden;
    max-height: 0px;
    transition: 1s;
    -webkit-transition: 1s;
    }
.RPG:hover ~ .info_rpg,
.info_rpg:hover,
.IRL:hover ~ .info_irl,
.info_irl:hover {
    max-height: 1220px;
}
.prez_section {
    background-color: #d2d2d2;
    margin: auto;
    margin-top: 10px;
    border: solid 2px;
    font-size: 18px;
    overflow: auto;
}

.RPG {
  width: 401px;
  height: 140px;
  float: left;
  opacity: 1;
  font-size: 30px;
  border-bottom: solid 2px;
  border-right: solid 2px;
  background: url('https://i97.servimg.com/u/f97/19/32/17/74/bloggi10.jpg');
}

.RPG:hover {
  background : #d2d2d2;
}

.IRL{
  width: 403px;
  height: 140px;
  float: left;
  font-size: 30px;
  opacity: 1;
  border-bottom: solid 2px;
  background-image: url('http://p3.storage.canalblog.com/38/40/284584/88026921_o.jpg');
  text-align: center;
}

.IRL:hover{
  background: #d2d2d2;
}

.Credit{
margin-top: 15px;
font-size: 8px;
text-align: right;
padding-right: 5px;
padding-bottom: 5px;
}

.NomPersonnage{
margin: auto;
width: 805px;
text-align: center;
font-size: 40px;
position: relative;
z-index: 26;
color: #191970;
font-family: 'Slabo 27px', serif;
transition-property: letter-spacing;
transition-duration: 1s;
}

.NomPersonnage:hover{
letter-spacing: 3px; 
}

Partie html à poster dans les messages :

Code:

<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet" /><div class="NomPersonnage"><i>NOM DU PERSONNAGE</i></div><div class="Encadrement"><div class="RPG"><div class="prez_title">RPG</div></div><div class="IRL"><div class="prez_title">IRL</div></div><div  style="clear: both;"></div><div class="info_rpg"><div style="margin-bottom: 15px;"></div><div class="prez_section" style="height: 300px; width: 780px;">TEXTE 1</div><div class="prez_section" style="height: 300px; width: 500px; float: left; margin-left: 10px;">TEXTE 2</div><div class="prez_section" style="height: 300px; width: 268px; float: left; margin-left: 10px;">TEXTE 3</div><div style="clear: both; margin-bottom: 10px;"></div><div class="prez_section" style="height: 180px; width: 780px;">TEXTE 4</div><div class="prez_section" style="height: 190px; width: 780px;">TEXTE 5</div><div class="Credit">Onyx, Nin, Prae, Élu et Chroma</div></div><div class="info_irl"><div style="margin-bottom: 15px;"></div><div class="prez_section" style="height: 550px; width: 780px;">TEXTE 1</div><div class="prez_section" style="height: 300px; width: 780px;">TEXTE 2</div><div class="prez_section" style="height: 130px; width: 780px;">TEXTE 3</div><div class="Credit"><a href="http://www.never-utopia.com/">Onyx, Prae</a>, Nin, Élu et Chroma</div></div></div>

Salut!

J'ai remplacé le code par celui qui est séparé en CSS et HTML pour une meilleure utilisation. C'est tout ok, donc je valide et le sujet sera déplacé sous peu!

Merci du partage ^^

Merci !

Merci pour le partage !

très joli fiche merci

Merci beaucoup