Exemple 19

Ce montage est particulier car j'ai utilisé des images horizontales de mon APN au rapport 16/9 et celles verticales de mon téléphone au ratio 4/3.

N'en conservez que le principe.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.2vh solid brown; text-align: left; background: linear-gradient(to bottom,#F5D0A9 0%,#A9F5F2 100%);">
<p id="vc0">Survol</p>
<p id="vc1" class="vc">&nbsp;</p>
<p id="vc2" class="vc">&nbsp;</p>
<p id="vc3" class="vc">&nbsp;</p>
<p id="vc4" class="vc">&nbsp;</p>
<p id="vc5" class="vc">&nbsp;</p>
<p id="vc6" class="vc">&nbsp;</p>
<p id="vc7" class="vc">&nbsp;</p>
<p id="vc8" class="vc">&nbsp;</p>
<p id="vc9" class="vc">&nbsp;</p>
<p id="vc10" class="vc">&nbsp;</p>
</div>

<style><!--
#vc0{position:absolute; z-index:1; width:10vw; transform:translate(25vw,0.5vw); text-align:center; font-size:2vw; color:white; text-shadow:0.2vh 0.2vh brown;}
.vc{position:absolute; z-index:1; width:10vw; height:4vw; box-shadow:0.2vh 0.2vh 0.4vh black, inset -0.4vh -0.4vh 0.6vh black, inset 0.4vh 0.4vh 0.6vh white; transition:all 1s linear;}
#vc1{background:url('http://ekladata.com/mPS8ZBn0-GfpmwWRiAGw1JStU8o@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-7vw -4vw; transform:translate(7vw,4vw);}
#vc2{background:url('http://ekladata.com/N9xlJKguMgShx5MTNb5hadee6NQ@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-25vw -4vw; transform:translate(25vw,4vw);}
#vc3{background:url('http://ekladata.com/dA0i58B0dlPCcS73a74obymQY0w@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-43vw -4vw; transform:translate(43vw,4vw);}
#vc4{background:url('http://ekladata.com/Bh0gsIgZxaX5amIiKI5zZMgOUq0@486x648.jpg'); background-size:25.3vw 33.75vw; background-position:-16vw -12vw; transform:translate(16vw,12vw);}
#vc5{background:url('http://ekladata.com/5lSPBFDxMRTJ8XzkdY4oKWV993c@486x648.jpg'); background-size:25.3vw 33.75vw; background-position:0vw -12vw; transform:translate(34vw,12vw);}
#vc6{background:url('http://ekladata.com/I_JBBl--HykTp-hSDDcuoThdycU@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-7vw -20vw; transform:translate(7vw,20vw);}
#vc7{background:url('http://ekladata.com/bVm24TVIe6OOnZwyERoow6U-1w4@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-25vw -20vw; transform:translate(25vw,20vw);}
#vc8{background:url('http://ekladata.com/1FWULifPEiG0hlrYykXhqe8HImY@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-43vw -20vw; transform:translate(43vw,20vw);}
#vc9{background:url('http://ekladata.com/df01Wy2Yv-u6ZBVUQSy4MrRWAvw@486x648.jpg'); background-size:25.3vw 33.75vw; background-position:-16vw -28vw; transform:translate(16vw,28vw);}
#vc10{background:url('http://ekladata.com/i-O8rwVyy6M3x3TsZSDJVeOn3Yo@486x648.jpg'); background-size:25.3vw 33.75vw; background-position:0vw -28vw; transform:translate(34vw,28vw);}
#vc1:hover,#vc2:hover,#vc3:hover,#vc6:hover,#vc7:hover,#vc8:hover{z-index:5; width:60vw; height:33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw);}
#vc4:hover, #vc9:hover{z-index:5; width:25.3vw; height:33.75vw; background-position:0vw 0vw; transform:translate(1.2vw,0vw);}
#vc5:hover, #vc10:hover{z-index:5; width:25.3vw; height:33.75vw; background-position:0vw 0vw; transform:translate(34vw,0vw);}
--></style>