Art.29A.4.21

1+6 images au ratio 16/9, dimensionnées en 1000x562px par le code; survol de chaque bouton.

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; background: url('http://ekladata.com/lCqBG2SZ_DoBVqeKXRxVd-2Mh2Y.jpg'); background-size: cover;">
<p id="zs">&nbsp;</p>
<p id="cd1" class="cd">&nbsp;</p>
<p id="mgg1" class="mg">&nbsp;</p>
<p id="mgd1" class="mg">&nbsp;</p>
<p id="cd2" class="cd">&nbsp;</p>
<p id="mgg2" class="mg">&nbsp;</p>
<p id="mgd2" class="mg">&nbsp;</p>
<p id="cd3" class="cd">&nbsp;</p>
<p id="mgg3" class="mg">&nbsp;</p>
<p id="mgd3" class="mg">&nbsp;</p>
<p id="cd4" class="cd">&nbsp;</p>
<p id="mgg4" class="mg">&nbsp;</p>
<p id="mgd4" class="mg">&nbsp;</p>
<p id="cd5" class="cd">&nbsp;</p>
<p id="mgg5" class="mg">&nbsp;</p>
<p id="mgd5" class="mg">&nbsp;</p>
<p id="cd6" class="cd">&nbsp;</p>
<p id="mgg6" class="mg">&nbsp;</p>
<p id="mgd6" class="mg">&nbsp;</p>
</div>
<style><!--
#zs{position:absolute; z-index:1; width:60px; height:562px; background:rgba(0,0,0,0.5); transform:translate(940px,0px);}
.cd{position:absolute; z-index:5; width:40px; height:20px; border-radius:50%; box-shadow:inset -3px -3px 6px black; background:lime;}
#cd1{transform:translate(950px,50px);}
#cd2{transform:translate(950px,100px);}
#cd3{transform:translate(950px,150px);}
#cd4{transform:translate(950px,200px);}
#cd5{transform:translate(950px,250px);}
#cd6{transform:translate(950px,300px);}
.mg{position:absolute; z-index:1; width:0px; height:562px; transition:all 1s;}
#mgg1{background:url('http://ekladata.com/DZnLTZvC267aOZmjTgjUVZ6KmZA.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#mgd1{background:url('http://ekladata.com/DZnLTZvC267aOZmjTgjUVZ6KmZA.jpg'); background-size:1000px 562px; background-position:-1000px 0px; transform:translate(1000px,0px);}
#mgg2{background:url('http://ekladata.com/-0raYx35X2ZKss8K4TO6swca41M.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#mgd2{background:url('http://ekladata.com/-0raYx35X2ZKss8K4TO6swca41M.jpg'); background-size:1000px 562px; background-position:-1000px 0px; transform:translate(1000px,0px);}
#mgg3{background:url('http://ekladata.com/YdPzKRyKEPbs0Gue2wIqdUGo0Yk.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#mgd3{background:url('http://ekladata.com/YdPzKRyKEPbs0Gue2wIqdUGo0Yk.jpg'); background-size:1000px 562px; background-position:-1000px 0px; transform:translate(1000px,0px);}
#mgg4{background:url('http://ekladata.com/zpoOl2k-ts5kbRc_HMwh1NsJNR0.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#mgd4{background:url('http://ekladata.com/zpoOl2k-ts5kbRc_HMwh1NsJNR0.jpg'); background-size:1000px 562px; background-position:-1000px 0px; transform:translate(1000px,0px);}
#mgg5{background:url('http://ekladata.com/_3Kt2H2xVMGx0Kh7brYaL9688ns.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#mgd5{background:url('http://ekladata.com/_3Kt2H2xVMGx0Kh7brYaL9688ns.jpg'); background-size:1000px 562px; background-position:-1000px 0px; transform:translate(1000px,0px);}
#mgg6{background:url('http://ekladata.com/0pOoPZQiWvWS4gUfNvRQ3NSqiAE.jpg'); background-size:1000px 562px; background-position:0px 0px;}
#mgd6{background:url('http://ekladata.com/0pOoPZQiWvWS4gUfNvRQ3NSqiAE.jpg'); background-size:1000px 562px; background-position:-1000px 0px; transform:translate(1000px,0px);}
#cd1:hover ~ #mgg1,#cd2:hover ~ #mgg2,#cd3:hover ~ #mgg3,#cd4:hover ~ #mgg4,#cd5:hover ~ #mgg5,#cd6:hover ~ #mgg6{width:500px;}
#cd1:hover ~ #mgd1,#cd2:hover ~ #mgd2,#cd3:hover ~ #mgd3,#cd4:hover ~ #mgd4,#cd5:hover ~ #mgd5,#cd6:hover ~ #mgd6{width:500px; background-position:-500px 0px; transform:translate(500px,0px);}
--></style>

********************

Ce code peut sans doute être simplifié mais le voilà brut de fonderie !

Chaque bouton commande la moitié gauche et la moitié droite d'une même image.