Art.22.5.21

5 images au ratio 16/9; code en 1000px par 562px.

Survol

<div style="width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/Q1DtxG5XvRZL9rdmFsxAnCYOxII.jpg'); background-size: cover;">
<p id="rat">Survol</p>
<img id="jar1" class="jar" src="http://ekladata.com/wEK7ypWT-NtaP5YHJYS3TaQp02c.jpg" alt="" /> <img id="jar2" class="jar" src="http://ekladata.com/9fJZkp2Hf5Bb5sVmfHVE0h1dOkA.jpg" alt="" /> <img id="jar3" class="jar" src="http://ekladata.com/FQ_VzJ_7O9z88VoFqEmrk_r_GaA.jpg" alt="" /> <img id="jar4" class="jar" src="http://ekladata.com/dXLp_0aLRtFIFcNlReWE5B-jZqQ.jpg" alt="" /></div>
<style><!--
#rat{position:absolute; z-index:1; width:200px; height:562px; background:rgba(255,255,255,0.5); transform:translate(800px,0px); text-align:center; font-size:25px; color:white; text-shadow:2px 2px black;}
.jar{position:absolute; z-index:1; width:160px; height:90px; clip-path:polygon(0% 0%, 50% 30%, 100% 0%,70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%); transition:all 1s;}
#jar1{transform:translate(830px,50px);}
#jar2{transform:translate(830px,170px);}
#jar3{transform:translate(830px,290px);}
#jar4{transform:translate(830px,410px);}
#jar1:hover,#jar2:hover,#jar3:hover,#jar4:hover{z-index:5; width:1000px; height:562px; transform:translate(0px,0px);clip-path:polygon(0% 0%, 50% 0%, 100% 0%,100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
--></style>