PA tons sombres/rouge avec staff et navigation en hover

Rappel du premier message :

Bonjour !

Voici une PA que j'ai réalisée suite à la demande d'Euterpe, et que je viens donc vous proposer (:

Ce que ça donne : clique
Lorsque la souris passe sur une des petites croix du staff : clique
Lorsque la souris passe sur une des petites croix de la navigation : clique





HTML

Code:

    <div id="fond_PA">
      <h1 id="titre_PA">Bienvenue sur mon forum</h1>
      <h3 id="soustitre_PA">Ce forum a été créé le ... Il est inspiré de...</h3>
      <div class="cadre_PA staff"> <span class="titre_cadre titre_staff">STAFF</span>
        <div class="bouton_croix"> <img class="image_staff un" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
        </div>
        <div class="bouton_croix"> <img class="image_staff deux" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
        </div>
        <div class="bouton_croix"> <img class="image_staff trois" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
        </div>
        <div class="bouton_croix"> <img class="image_staff quatre" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
        </div>
        <div class="bouton_croix"> <img class="image_staff cinq" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
        </div>
      </div>
      <div id="contexte_titre"> <span class="titre_cadre titre_contexte">CONTEXTE</span>
        <div class="cadre_PA contexte">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et condimentum ligula. Donec pulvinar, massa et vulputate viverra, purus dolor sagittis massa, vel egestas orci justo ac lorem.
            Maecenas at lacinia ex, ac viverra risus. Vivamus ipsum lacus, ultrices dictum molestie id, condimentum quis erat. Etiam quam tortor, pellentesque eu aliquam a, ultrices eu nibh. Maecenas porta     placerat vehicula. Ut vitae maximus erat. Proin eget purus non orci
            convallis auctor. Praesent vulputate sed est vitae auctor. Mauris
            eleifend consequat mattis. Aliquam tortor augue, commodo vitae
            faucibus nec, semper in magna. Praesent vitae nibh et tortor posuere
            convallis. Vestibulum dignissim bibendum ante et sollicitudin.
            Nullam hendrerit sapien non erat venenatis, molestie tincidunt
            mauris condimentum. </p>
          <p> Integer eget augue lacus. Fusce venenatis orci et vehicula
            finibus. Phasellus rhoncus quis purus a bibendum. Phasellus egestas
            ultrices sapien id condimentum. Proin vel fermentum lectus. Duis vel
            vehicula sem, at iaculis augue. Proin suscipit fringilla dignissim.
            Vestibulum efficitur nunc sit amet mauris viverra luctus. Aenean
            vitae velit lectus. Sed accumsan porta quam. Aliquam sit amet porta
            velit. Vivamus dapibus urna nec consectetur rhoncus. Maecenas vitae
            bibendum odio. In velit nunc, elementum et cursus vel, interdum eu
            risus. </p>
        </div>
      </div>
      <div class="cadre_PA postes_vacants"> <span class="titre_cadre titre_pv">POSTES
          VACANTS</span>
        <div id="pv"> <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png"></a>
          <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png"></a>
          <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png"></a>
          <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png"></a>
          <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png"></a>
          <a href="#"><img class="img_pv" src="http://i39.servimg.com/u/f39/17/14/00/25/pv11.png"></a>
        </div>
      </div>
      <div id="partenaires_PA"> <span class="titre_cadre titre_partenaires">TOP
          PARTENAIRES</span>
        <div class="img_partenaires"> <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
          <a href="#"><img src="http://i39.servimg.com/u/f39/17/14/00/25/parten12.png"></a>
        </div>
        <span id="nous_lier"> <a href="#">NOUS LIER</a> // <a href="#">PLUS </a>//
          <a href="#">VOUS</a> </span> <a href="#"><img src="http://img2.wikia.nocookie.net/__cb20120221101557/eden-eternal/fr/images/2/23/Logo_facebook_mini.gif"></a>
      </div>
      <div class="cadre_PA navigation_PA"> <span class="titre_cadre titre_navig">NAVIGATION</span>
        <div class="bouton_croix_navig"> <img class="image_navig un" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
        </div>
        <div class="bouton_croix_navig"> <img class="image_navig deux" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
        </div>
        <div class="bouton_croix_navig"> <img class="image_navig trois" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
        </div>
        <div class="bouton_croix_navig"> <img class="image_navig quatre" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
        </div>
        <div class="bouton_croix_navig"> <img class="image_navig cinq" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
        </div>
        <div class="bouton_croix_navig"> <img class="image_navig six" src="http://img1.wikia.nocookie.net/__cb20120225115529/walkingdead/images/0/0a/Daryl-dixon-picture.jpg">
          <a href="#"><img class="img_croix" src="http://img4.hostingpics.net/pics/793740Sanstitre8.jpg"></a>
        </div>
      </div>
      <span style="color: #434142; display:block; text-align: center; margin-top: 15px;">(c) Lihuén sur <a href="http://www.never-utopia.com/">Never-Utopia</a></span>
    </div>
    <link href="//fonts.googleapis.com/css?family=Cinzel:400,700,900" rel="stylesheet"

      type="text/css">

CSS

Code:

/* ------------ MISE EN FORME PA ------------ */
#fond_PA {
  height: 515px;
  width: 900px;
  background-color: #100e0f;
}
#titre_PA {
  color: #5a0e0f;
  font-family: Cinzel;
  font-size: 48px;
  text-shadow: 0px 0px 15px #4c3436;
  margin-bottom: -25px;
  text-align: center;
}
#soustitre_PA {
  color: #434142;
  font-family: Cinzel;
  opacity: 0.5;
  text-align: center;
}
.cadre_PA {
  background: rgba(35, 30, 33, 0.5);
  box-shadow: 2px 2px 2px black;
  font-family: Arial;
  font-size: 11px;
  position: relative;
  display: inline-block;
  z-index: 0;
}
.titre_cadre {
  color: #5a0e0f;
  font-family: Cinzel;
  font-weight: bold;
  font-size: 30px;
  z-index: 2;
  text-align: left;
  display: inline-block;
  position: absolute;
}
/* MISE EN FORME DU CADRE STAFF */
.staff {
  width: 268px;
  height: 143px;
  float: left;
  margin-left: 10px;
}
.titre_staff {
  width: 15px;
  word-wrap: break-word;  
  top: -10px;
  left: -5px;
  line-height: 32px;
}
.bouton_croix {
  display: inline-block;
  margin: 150px auto 20px auto;
  overflow: visible;
  width: 31px;
  height: 28px;
}
.bouton_croix .image_staff {
  position: absolute;
  width: 200px;
  height: 120px;
  z-index: 1;
  visibility: hidden;
}
.bouton_croix .un {
  margin: -140px 0px 0px 0px;
}
.bouton_croix .deux {
  margin: -140px 0px 0px -34px;
}
.bouton_croix .trois {
  margin: -140px 0px 0px -68px;
}
.bouton_croix .quatre {
  margin: -140px 0px 0px -102px;
}
.bouton_croix .cinq {
  margin: -140px 0px 0px -136px;
}
.bouton_croix:hover .image_staff {
  visibility: visible;
}
/* MISE EN FORME DU CONTEXTE */
.contexte {
  width: 416px;
  height: 160px;
  padding: 5px;
  text-align: justify;
  overflow: auto;
  left: -10px;
  top: 17px;
  font-family: Cinzel;
  color: #b6b4b4;
}
.contexte p {
  font-family: Cinzel;
  color: #b6b4b4;
}
.titre_contexte {
  width: 416px;
  margin-left: -20px;
}
#contexte_titre {
  overflow: visible;
  display: inline-block;
  width: 430px;
  height: 160px;
}
/* MISE EN FORME POSTES VACANTS */
.postes_vacants {
  width: 92px;
  height: 381px;
  float: right;
  margin-right: 30px;
}
.titre_pv {
  width: 15px;
  word-wrap: break-word;
  top: -20px;
  right: -5px;
  line-height: 32px;
}
#pv {
  margin-top: 30px;
}
.img_pv {
  margin: 2px 0px 2px 0px;
}
/*MISE EN FORME PARTENAIRES */
#partenaires_PA {
  position: relative;
  display: inline-block;
  margin: 80px 0px 0px 20px;
  width: 300px;
  height: 150px;
  float: left;
}
.titre_partenaires {
  width: 320px;
  left: 5px;
  top: -30px;
}
.img_partenaires {
  margin-top: 10px;
}
.img_partenaires img {
  margin: 1px 1px 0px 0px;
}
#nous_lier {
  color: #5a0e0f;
  text-align: center;
  font-size: 13px;
  display: block;
  padding: 10px;
}
#nous_lier a {
  text-decoration: none;
  color: #5a0e0f;
  font-family: Cinzel;
  font-weight: bold;
}
/* MISE EN FORME NAVIGATION */
.navigation_PA {
  width: 326px;
  height: 191px;
  margin-top: 42px;
}
.titre_navig {
  right: -20px;
  top: -15px;
}
.bouton_croix_navig {
  margin: 3px 0px 3px -370px;
  display: block;
  width: 31px;
  height: 28px;
}
.image_navig {
  width: 326px;
  height: 191px;
  display: inline-block;
  position: absolute;
  visibility: hidden;
}
.bouton_croix_navig .un {
  margin: -2px 0px 0px 38px;
}
.bouton_croix_navig .deux {
  margin: -33px 0px 0px 38px;
}
.bouton_croix_navig .trois {
  margin: -64px 0px 0px 38px;
}
.bouton_croix_navig .quatre {
  margin: -95px 0px 0px 38px;
}
.bouton_croix_navig .cinq {
  margin: -126px 0px 0px 38px;
}
.bouton_croix_navig .six {
  margin: -157px 0px 0px 38px;
}
.bouton_croix_navig:hover .image_navig {
  visibility: visible;
}


Merci

merci!