05.05.2024

Montage en 1000px par 563px (16/9) modifiable en d'autres dimensions, pour 1+6 images. 

<div style="width:1000px; height:563px; border:4px ridge grey; box-shadow:4px 4px 6px black; margin:50px auto; background:url('http://ekladata.com/X8E8iOwx0Ck-fCQIUPmkEmkZ7Eo.jpg'); background-size:cover;">
<p id="zg" class="zz">&nbsp;</p>
<p id="zd" class="zz">&nbsp;</p>
<p id="sv">Survol</p>
<p id="mg1" class="demi">&nbsp;</p>
<p id="md1" class="demi">&nbsp;</p>
<p id="mg2" class="demi">&nbsp;</p>
<p id="md2" class="demi">&nbsp;</p>
<p id="mg3" class="demi">&nbsp;</p>
<p id="md3" class="demi">&nbsp;</p>
<p id="mg4" class="demi">&nbsp;</p>
<p id="md4" class="demi">&nbsp;</p>
<p id="mg5" class="demi">&nbsp;</p>
<p id="md5" class="demi">&nbsp;</p>
<p id="mg6" class="demi">&nbsp;</p>
<p id="md6" class="demi">&nbsp;</p>
</div>

<style><!--
.zz{position:absolute; z-index:1; width:80px; height:563px; background:rgba(0,0,0,0.5);}
#zg{transform:translate(0px,0px);}
#zd{transform:translate(920px,0px);}
#sv{position:absolute; z-index:1; width:80px; text-align:center; font-size:25px; color:white; text-shadow:1px 1px black; transform:translate(0px,10px);}
.demi{position:absolute; z-index:5; width:60px; height:60px; border:2px solid white; border-radius:50%; transition:all 1s;}

#mg1{background:url('http://ekladata.com/TxuEpTXJ2dtnuJ70R7oqNU8h8oQ.jpg'); background-size:1000px 563px; background-position:-6px -40px; transform:translate(6px,40px);}
#md1{background:url('http://ekladata.com/TxuEpTXJ2dtnuJ70R7oqNU8h8oQ.jpg'); background-size:1000px 563px; background-position:-906px -40px; transform:translate(926px,40px);}
#mg2{background:url('http://ekladata.com/QpW4O_qNohcylJ2g0ZmC74oFFss.jpg'); background-size:1000px 563px; background-position:-6px -124px; transform:translate(6px,124px);}
#md2{background:url('http://ekladata.com/QpW4O_qNohcylJ2g0ZmC74oFFss.jpg'); background-size:1000px 563px; background-position:-926px -124px; transform:translate(926px,124px);}
#mg3{background:url('http://ekladata.com/yAw1dWwomzvmQEiBAhDlBLD0E38.jpg'); background-size:1000px 563px; background-position:-6px -208px; transform:translate(6px,208px);}
#md3{background:url('http://ekladata.com/yAw1dWwomzvmQEiBAhDlBLD0E38.jpg'); background-size:1000px 563px; background-position:-926px -208px; transform:translate(926px,208px);}
#mg4{background:url('http://ekladata.com/viP5K9ImMKBW9E56KqAqtq7cf-c.jpg'); background-size:1000px 563px; background-position:-6px -292px; transform:translate(6px,292px);}
#md4{background:url('http://ekladata.com/viP5K9ImMKBW9E56KqAqtq7cf-c.jpg'); background-size:1000px 563px; background-position:-926px -292px; transform:translate(926px,292px);}
#mg5{background:url('http://ekladata.com/45AaFFZkv00b6PzX071gZ4oxVDo.jpg'); background-size:1000px 563px; background-position:-6px -376px; transform:translate(6px,376px);}
#md5{background:url('http://ekladata.com/45AaFFZkv00b6PzX071gZ4oxVDo.jpg'); background-size:1000px 563px; background-position:-926px -376px; transform:translate(926px,376px);}
#mg6{background:url('http://ekladata.com/QTw4YMTMeUqEU94D7jOMegBs9rw.jpg'); background-size:1000px 563px; background-position:-6px -460px; transform:translate(6px,460px);}
#md6{background:url('http://ekladata.com/QTw4YMTMeUqEU94D7jOMegBs9rw.jpg'); background-size:1000px 563px; background-position:-926px -460px; transform:translate(926px,460px);}

#mg1:hover,#mg2:hover,#mg3:hover,#mg4:hover,#mg5:hover,#mg6:hover{z-index:10; width:500px; height:563px; border:none; border-radius:0%; background-position:0px 0px; transform:translate(0px,0px);}
#mg1:hover ~ #md1,#mg2:hover ~ #md2,#mg3:hover ~ #md3,#mg4:hover ~ #md4,#mg5:hover ~ #md5,#mg6:hover ~ #md6{z-index:10; width:500px; height:563px; border:none; border-radius:0%; background-position:-500px 0px; transform:translate(500px,0px);}
--></style>