21.05.2024

Montage en 1100x619px avec 5 images au ratio 16/9 ou autre déformé.

Survol

<div style="width: 1100px; height: 619px; margin: 50px auto; border: 6px ridge white; box-shadow: 4px 4px 8px black; background: url('http://ekladata.com/b3ZjGoXVFvQopItv8chtyZfJ5Mo.jpg'); background-size: cover; text-align: left;">
<p id="masq">Survol</p>
<img id="jd1" class="jd" src="http://ekladata.com/ghyXKOjjRuQBJh9oB6pyyk0h3D8.jpg" alt="" /> <img id="jd2" class="jd" src="http://ekladata.com/MXyLTlIi0w5FpbBlW8f2lE35zBY.jpg" alt="" /> <img id="jd3" class="jd" src="http://ekladata.com/5IPLB8VUjZFNM0t2qM4TS4fyNN0.jpg" alt="" /> <img id="jd4" class="jd" src="http://ekladata.com/lT-rcle2pXDlHJ-zc0qo5OBEkaE.jpg" alt="" /></div>

<style><!--
#masq{position:absolute; width:450px; height:619px; background:rgba(0,0,0,0.5); transform:translate(650px,0px); font-size:25px; color:white; text-shadow:2px 2px black;}
.jd{position:absolute; z-index:1; width:1100px; height:619px; transition:all 1s;}
#jd1{clip-path:polygon(80% 5%, 85% 30%, 80% 50%, 75% 30%);}
#jd2{clip-path:polygon(85% 40%, 100% 50%, 85% 60%,80% 50%);}
#jd3{clip-path:polygon(80% 50%, 85% 70%, 80% 95%, 75% 70%);}
#jd4{clip-path:polygon(75% 40%, 80% 50%, 75% 60%, 60% 50%);}
#jd1:hover,#jd2:hover,#jd3:hover,#jd4:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>