Merci encore !

Hello hello ^^
Je veux bien répondre à ta commande (si personne ne s'en charge déjà) mais j'aurais bien aimé que tu réexpliques ce que tu attends au niveau des effets voulus (transitions, etc) parce que je n'ai pas bien compris :/. Tu peux peut-être essayer en modifiant ton schéma avec l'effet normal et l'effet au survol. Enfin voilà, j'attends tes instructions =).

Bonjour !
Tout à bord désolée pour ce temps de réponse, j'ai eu quelques soucis de santé D:
Merci en tout cas de bien vouloir te charger du projet !

Alors, pour ce qui est des explications, voilà pour toi :
PA NORMAL
PA AU SURVOL

Dis moi si c'est compréhensible ou si tu veux que je trouve des exemples en codage.
Merci encore.

Up ♥

Hello !
Excuse moi du temps de réponse, je prends note de tes indications pour les effets au hover, merci ^^. Je n'ai pas encore commencé mais je pense faire ça les prochains jours :).

Merci beaucoup et pas de soucis ! Prend ton temps, ce n'est pas non plus pressé 8D

Me revoilà avec le lien vers le résultat (je le mets en hide) ^^
Bon heum là fatalement c'est sur mon forum test donc la nuit le fond est bleu foncé, ce sera en fonction de ton fond à toi.


J'attends que tu regardes, que tu me dises si ça te convient, et si oui on valide et je te donne les codes. Comme ça, je ferai les éventuelles modifications si besoin moi-même, question de facilité.

Franchement, c'est juste parfait !
Tu as fait un superbe travail (et même avec le fond bleu ça rend bien ahaha !) Donc un très très grand merci à toi. Au risque de me répéter : c'est vraiment superbe ♥

Je suis ravie que ça te plaise

Donc voici le code à html à placer en page d'accueil

Code:

<link href="https://fonts.googleapis.com/css?family=Anton|Fjalla+One|Poiret+One" rel="stylesheet" type="text/css" />
<div class="paccueil">
                            
   <div class="paccueil__head">
                  <img class="paccueil__img" src="http://ahp.li/8c201585b85b5055fc6a.png" />               
      <h2 class="paccueil__titre">
                     Bienvenue sur Time Traveler           
      </h2>
                               
   </div>
                            
   <div class="paccueil__body">
                                 
      <div class="team">
                     <img alt="Le Staff" class="staff_titreimg" src="http://ahp.li/13c330b79aa106e7decb.jpg" />   
         <div class="team__item">
                <img src="http://ahp.li/ba034f53368a3383d2c3.jpg" />   
         </div>
              
         <div class="team__item">
                <img src="http://ahp.li/ba034f53368a3383d2c3.jpg" />   
         </div>
                
         <div class="team__item">
                <img src="http://ahp.li/ba034f53368a3383d2c3.jpg" />   
         </div>
              
         <div class="team__item">
                <img src="http://ahp.li/ba034f53368a3383d2c3.jpg" />   
         </div>
              
         <div class="team__item">
                <img src="http://ahp.li/ba034f53368a3383d2c3.jpg" />   
         </div>
                
      </div>
                                 
      <div class="links">
                                 <a href="#">Lien Important 1</a><a href="#">Lien Important 2</a><a href="#">Lien Important 3</a><a href="#">Lien Important 4</a><a href="#">Lien Important 5</a>                       
      </div>
         
      <div class="groupes">
            
         <p>
              <span class="groupe1">Good Travelers ||</span> Nombre de membres 
         </p>
            
         <p>
              <span class="groupe2">Bad Travelers ||</span> Nombre de membres 
         </p>
            
         <p>
              <span class="groupe3">The Entities ||</span> Nombre de membres 
         </p>
              
      </div>
       
      <div class="predefs">
          
         <div>
              <img src="http://ahp.li/212c7272c867323a2685.jpg" />Prénom P. Nom <span>groupe</span>
         </div>
          
         <div>
              <img src="http://ahp.li/212c7272c867323a2685.jpg" />Prénom P. Nom  <span>groupe</span>
         </div>
          
         <div>
              <img src="http://ahp.li/212c7272c867323a2685.jpg" />Prénom P. Nom  <span>groupe</span>
         </div>
          
         <div>
              <img src="http://ahp.li/212c7272c867323a2685.jpg" />Prénom P. Nom  <span>groupe</span>
         </div>
          
         <div>
              <img src="http://ahp.li/212c7272c867323a2685.jpg" />Prénom P. Nom  <span>groupe</span>
         </div>
          
      </div>
                               
   </div>
</div>

Et le code css à mettre dans couleurs > feuilles de style (au cas où tu ne le saurais pas déjà ^^)

Code:

.paccueil{
width:800px;
background:white;
margin: 100px auto 0;

}
 .paccueil__head {
    background: #e1dddd;
    height: 13px;
    padding: 87px 0 52px;
    position: relative;
}

.paccueil__img {
    display: block;
    position: absolute;
    bottom: 61px;
    left: 173px;
}
.paccueil__titre {
    text-align: center;
    color: #bace30;
    font-weight: 400;
    font-family: impact;
    text-shadow: 1px 3px 0px #452a55;
    margin: 0;
    text-transform: uppercase;
    font-size: 39px;
}
.team {
    float: left;
    width: 36%;
    margin-left: 1%;
}
.links {
    width: 22%;
    float: left;
  padding:10px 0;
  text-align:center;
  font-family:'Fjalla one';
}
.links a{
display:block;
 color:#452a55 !important;
  font-size:16px;
  margin-bottom:7px;
 text-decoration:none;
 text-transform:uppercase;
 transition:all 0.7s;
}
.links a:hover{
color:#ab3c55 !important;
text-decoration:none !important;
}
.paccueil__body{
background: #e1dddd;
overflow:hidden;
padding: 20px 10px;
margin-top:10px;
}
.team__item {
    width: 71px;
    height:71px;
    float: left;
  margin: 0 0 20px 20px;
  position:relative;
  overflow:hidden;
  background:#452a55;
  color:white;
  font-family:'Fjalla one';
}
.team__item>img{
position:absolute;
left:0px;
top:0px;
transition:all 1s;
}
.team__item:hover img{
position:absolute;
left:-100px;
}
.staff_titreimg {
    float: left;
    margin: 0 0 20px 20px;
}
.groupes p {
    background: #cdc5c5;
    text-shadow: 1px 2px 0px #452a55;
    padding: 10px 0 10px 10px;
    font-weight: 400;
    font-family: 'Fjalla one';
    margin: 0px 0 18px;
    font-size: 16px;
    color: white;
    text-transform: uppercase;
}
.groupes {
    width: 36%;
      margin-left: 1%;
    float: left;
}
.groupe1{
    color:#bace30;
}
.groupe2{
    color:#452a55;
  text-shadow: 1px 2px 0px white;
}
.groupe3{
    color:#ab3c55;
}
.predefs div {
        background: #bace30;
    color: #fff;
    float: left;
    height: 34px;
    margin: 0 13px;
    font-family: 'Fjalla one';
    overflow: hidden;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    width: 130px;
}
.predefs {
    clear: both;
}
.predefs div img {
    position: absolute;
    left: 0px;
    top: 0px;
  opacity:1;
  transition:all 0.7s;
}
.predefs div span{
font-family: 'Poiret One', cursive;
text-transform:none;
 font-size:16px;
display:block;
}
.predefs div img:hover{
 opacity:0;
}

S'il y a un problème à l'installation, je suis là :)

Tout fonctionne correctement, et ça rend super bien ! Encore un grand merci (qui sera bien entendu réitéré dans les crédits du forum !) ♥