26.02.2024

Montage en 800x600px pour 1+5 images.

<div style="width: 800px; height: 600px; margin: 50px auto; text-align: left; border: 6px ridge white; box-shadow: 4px 4px 8px black; background: url('http://ekladata.com/Owzt6XmuQSkAcr3mFOgTI6iPHjM.jpg'); background-size: 800px 600px;">
<p id="fg">&nbsp;</p>
<p id="bs1" class="bs">&nbsp;</p>
<p id="bs2" class="bs">&nbsp;</p>
<p id="bs3" class="bs">&nbsp;</p>
<p id="bs4" class="bs">&nbsp;</p>
<p id="bs5" class="bs">&nbsp;</p>
</div>

<style><!--
#fg{position:absolute; z-index:1; width:80px; height:600px; background:rgba(0,0,0,0.5);}
.bs{position:absolute; z-index:5; width:30px; height:80px; border:3px solid white; box-shadow:2px 2px 4px black; transition:all 1s;}
#bs1{box-sizing:border-box; background:url('http://ekladata.com/Fakcx0pR-uMuqU0vM1F-wsV1H68.jpg'); background-size:800px 600px; background-position:-20px -50px; transform:translate(20px, 50px) skewx(15deg);}
#bs2{box-sizing:border-box; background:url('http://ekladata.com/G9RsL0p4RD9SSS165gLc4_5z8r8.jpg'); background-size:800px 600px; background-position:-20px -150px; transform:translate(20px, 150px) skewx(15deg);}
#bs3{box-sizing:border-box; background:url('http://ekladata.com/bcdZ0J_o0dl6rRsULNP3y46ZUdQ.jpg'); background-size:800px 600px; background-position:-20px -250px; transform:translate(20px, 250px) skewx(15deg);}
#bs4{box-sizing:border-box; background:url('http://ekladata.com/-61KJ0DT222eYLXfSQlMasxoR7A.jpg'); background-size:800px 600px; background-position:-20px -350px; transform:translate(20px, 350px) skewx(15deg);}
#bs5{box-sizing:border-box; background:url('http://ekladata.com/eEpHJsVGfvoUbgMaX-q4xQb7gS0.jpg'); background-size:800px 600px; background-position:-20px -450px; transform:translate(20px, 450px) skewx(15deg);}
#bs1:hover,#bs2:hover,#bs3:hover,#bs4:hover,#bs5:hover{z-index:10; width:800px; height:600px; border:none; box-shadow:none; background-position:0px 0px; transform:translate(0px,0px) skewx(0deg);}
--></style>