.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; }