-
Art.07B.5.21
Montage exemple en 80vw par 45vw; code en 1000px par 562px; 6 images au ratio 16/9.
Survol
<div style="width: 1000px; height: 562px; border: 1px solid black; margin: 20px auto; background: url('http://ekladata.com/lfbnb81ab5S59tMRb25ekTLBdOI.jpg'); background-size: cover; text-align: left;">
<p id="jar0">Survol</p>
<p id="jar1" class="jar"> </p>
<p id="jar2" class="jar"> </p>
<p id="jar3" class="jar"> </p>
<p id="jar4" class="jar"> </p>
<p id="jar5" class="jar"> </p>
</div>
<style><!--
#jar0{position:absolute; z-index:1: width:120px; font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(20px,20px);}
.jar{position:absolute; z-index:1; width:150px; height:50px; border-radius:2.5vw; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; transition:all 1s;}
#jar1{background:url('http://ekladata.com/X7DoWCgU7Eh_RiLXFF22XAbfHU8.jpg'); background-size:1000px 562px; background-position:-150px -80px; transform:translate(150px,80px);}
#jar2{background:url('http://ekladata.com/RPt4yduyFSV5_EtaktGO3mcQPXo.jpg'); background-size:1000px 562px; background-position:-120px -160px; transform:translate(120px,160px);}
#jar3{background:url('http://ekladata.com/2dAUW15Oh-e1_KPrqpDFynJsmt8.jpg'); background-size:1000px 562px; background-position:-90px -240px; transform:translate(90px,240px);}
#jar4{background:url('http://ekladata.com/vZdDrs6Ks9mUjl-5f9ih_piYVGw.jpg'); background-size:1000px 562px; background-position:-120px -320px; transform:translate(120px,320px);}
#jar5{background:url('http://ekladata.com/_H92zZiPWuPqSRT93iyXo7wgXDI.jpg'); background-size:1000px 562px; background-position:-150px -400px; transform:translate(150px,400px);}
#jar1:hover,#jar2:hover,#jar3:hover,#jar4:hover,#jar5:hover{z-index:5; width:1000px; height:562px; border-radius:0px; box-shadow:none; background-position:0px 0px; transform:translate(0px,0px);}
--></style>