Exemple 206

Survol jusqu'à coloration. 10 images au ratio 16/9. 

<div style="width:1000px; height:563px; margin:5px auto;">
<p id="jar1" class="jar">&nbsp;</p>
<p id="jar2" class="jar">&nbsp;</p>
<p id="jar3" class="jar">&nbsp;</p>
<p id="jar4" class="jar">&nbsp;</p>
<p id="jar5" class="jar">&nbsp;</p>
<p id="jar6" class="jar">&nbsp;</p>
<p id="jar7" class="jar">&nbsp;</p>
<p id="jar8" class="jar">&nbsp;</p>
<p id="jar9" class="jar">&nbsp;</p>
<p id="jar10" class="jar">&nbsp;</p>
</div>

<style><!--
.jar{position:absolute; z-index:1; width:80px; height:563px; border:4px solid white; filter:grayscale(1); transition:transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
#jar1{box-sizing:border-box; background:url('http://ekladata.com/GYP9CzZEsyB6zD-l5YkUcYrD6SM.jpg'); background-size:1000px 563px; background-position:-10px 0px; transform:translate(10px,0px);}
#jar2{box-sizing:border-box; background:url('http://ekladata.com/KOLlDHnwIADm0GgkTRFswhKcVRw.jpg'); background-size:1000px 563px; background-position:-110px 0px; transform:translate(110px,0px);}
#jar3{box-sizing:border-box; background:url('http://ekladata.com/QmaBePbSDB8YgqQ5PYWNcyDFOlI.jpg'); background-size:1000px 563px; background-position:-210px 0px; transform:translate(210px,0px);}
#jar4{box-sizing:border-box; background:url('http://ekladata.com/NnSxEMBVYxLRiP863cLK-mRtWkE.jpg'); background-size:1000px 563px; background-position:-310px 0px; transform:translate(310px,0px);}
#jar5{box-sizing:border-box; background:url('http://ekladata.com/uoqjX_uJf8ylx1c2bDYVExxNtHU.jpg'); background-size:1000px 563px; background-position:-410px 0px; transform:translate(410px,0px);}
#jar6{box-sizing:border-box; background:url('http://ekladata.com/e_4Qzcr-YiTYH09el17Ie4oXUOw.jpg'); background-size:1000px 563px; background-position:-510px 0px; transform:translate(510px,0px);}
#jar7{box-sizing:border-box; background:url('http://ekladata.com/KNZ_UNcPXsp6L_QEh_7ZWXEUEg0.jpg'); background-size:1000px 563px; background-position:-610px 0px; transform:translate(610px,0px);}
#jar8{box-sizing:border-box; background:url('http://ekladata.com/aL7hwg55_ZHIHNQKWIOMoKVUrbs.jpg'); background-size:1000px 563px; background-position:-710px 0px; transform:translate(710px,0px);}
#jar9{box-sizing:border-box; background:url('http://ekladata.com/KCPKfLlpGZW3d-CLUvOFoCdxmnM.jpg'); background-size:1000px 563px; background-position:-810px 0px; transform:translate(810px,0px);}
#jar10{box-sizing:border-box; background:url('http://ekladata.com/fM_0bisvqunJdujE3VG3627jh3M.jpg'); background-size:1000px 563px; background-position:-910px 0px; transform:translate(910px,0px);}
#jar1:hover,#jar2:hover,#jar3:hover,#jar4:hover,#jar5:hover,#jar6:hover,#jar7:hover,#jar8:hover,#jar9:hover,#jar10:hover{z-index:5; width:1000px; background-position:0px 0px; filter:grayscale(0); transform:translate(0px,0px);}
--></style>