Loneci

 Remplacez les 8 adresses de mes images par les vôtres ... et pi c'est tout !

Si le ratio de vos images est autre que 16/9, vos images seront déformées mais c'est souvent plus agréable à l'oeil.

SURVOL

<div style="width: 1000px; height: 563px; margin: 30px auto; text-align: left; background: white; border: 4px ridge white; box-shadow: 4px 4px 8px black;">
<p id="jar0">SURVOL</p>
<img id="jar1" class="jar" src="http://ekladata.com/RE-F9RsqbK5bQ5w28QqY38izytg.jpg" alt="" />
<img id="jar2" class="jar" src="http://ekladata.com/5gqnWTV5jlssDyUqN__wzoEWr08.jpg" alt="" />
<img id="jar3" class="jar" src="http://ekladata.com/HzcUO7A1XOv5VnNxqQyNOLrupxg.jpg" alt="" />
<img id="jar4" class="jar" src="http://ekladata.com/Qr0c5Uvws7uYbA8h0Jxik3kp7Ec.jpg" alt="" />
<img id="jar5" class="jar" src="http://ekladata.com/1lMVoR6YTRtZoX0njLGuEwSJkrQ.jpg" alt="" />
<img id="jar6" class="jar" src="http://ekladata.com/7A8-P1rxd5KiIHb2yGJlI4SZXfE.jpg" alt="" />
<img id="jar7" class="jar" src="http://ekladata.com/ehmfMg7KD1-QZ7tRx33cpp4CT2E.jpg" alt="" />
<img id="jar8" class="jar" src="http://ekladata.com/PE2OMG-Xgqb1442l1-p2PZytvH0.jpg" alt="" />
</div>
<style><!--
#jar0{position:absolute; z-index:1; width:330px; font-size:30px; color:lime; text-shadow:1px 1px black; text-align:center; transform:translate(330px,260px);}
.jar{position:absolute; z-index:1; width:330px; height:187px; filter:grayscale(1); transition:all 1s 0s,filter 1s 1.2s;}
#jar1{transform:translate(0px,0px);}
#jar2{transform:translate(335px,0px);}
#jar3{transform:translate(670px,0px);}
#jar4{transform:translate(0px,188px);}
#jar5{transform:translate(670px,188px);}
#jar6{transform:translate(0px,376px);}
#jar7{transform:translate(335px,376px);}
#jar8{transform:translate(670px,376px);}
#jar1:hover,#jar2:hover,#jar3:hover,#jar4:hover,#jar5:hover,#jar6:hover,#jar7:hover,#jar8:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px);filter:grayscale(0); }
--></style>