.banniere{
  position: relative;
  /*
    Le calcule du pourcentage du padding-bottom est :
    Hauteur de l'image / Largeur de l'image * 100
    Pour cet exemple, nous utilisons des images 700x350px donc :
    700 / 350 * 100 = 50
  */
  padding-bottom:50%;
  /* page de hauteur car la hauteur sera créée avec le padding */
  height:0;
  overflow: hidden;
}

.banniere_suivant , .banniere_precedent{
  position: absolute;
  background:#fff;
  top:40%;
  padding:10px;
  height:60px;
  width:60px;
  font-size:30px;
  font-weight:bold;
  color:#000;
  line-height:1.8em;
  z-index:2;
  -webkit-border-radius:60px;
  -khtml-border-radius:60px;
  -moz-border-radius:60px;
  -ms-border-radius:60px;
  -o-border-radius:60px;
  border-radius:60px;
  cursor:pointer;
  display:none;
  -webkit-opacity:0.4;
  -khtml-opacity:0.4;
  -moz-opacity:0.4;
  -ms-opacity:0.4;
  -o-opacity:0.4;
  opacity:0.4;
  filter:alpha(opacity=40);
}

.banniere_suivant{
  right:-40px;
  text-align:left;
  -webkit-box-shadow:-2px 0 5px #000;
  -khtml-box-shadow:-2px 0 5px #000;
  -moz-box-shadow:-2px 0 5px #000;
  -ms-box-shadow:-2px 0 5px #000;
  -o-box-shadow:-2px 0 5px #000;
  box-shadow:-2px 0 5px #000;
}

.banniere_precedent{
  left:-40px;
  text-align:right;
  -webkit-box-shadow:2px 0 5px #000;
  -khtml-box-shadow:2px 0 5px #000;
  -moz-box-shadow:2px 0 5px #000;
  -ms-box-shadow:2px 0 5px #000;
  -o-box-shadow:2px 0 5px #000;
  box-shadow:2px 0 5px #000;
}

.banniere:hover .banniere_suivant , .banniere:hover .banniere_precedent{
  -webkit-opacity:1;
  -khtml-opacity:1;
  -moz-opacity:1;
  -ms-opacity:1;
  -o-opacity:1;
  opacity:1;
  filter:alpha(opacity=100);
  -webkit-transition:opacity 0.3s ease;
  -khtml-transition:opacity 0.3s ease;
  -moz-transition:opacity 0.3s ease;
  -ms-transition:opacity 0.3s ease;
  -o-transition:opacity 0.3s ease;
  transition:opacity 0.3s ease;
}

.banniere img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:1;
}