Art.21A.5.21

5 images au ratio 16/9 à survoler. Vous pouvez modifier la couleur de fond; je l'ai paramétrée au hasard !

Survol

<div style="width: 1000px; height: 562px; margin: 10px auto; border: 4px ridge white; text-align: left; background: linear-gradient(to bottom, rgba(50,100,200,0.5) 0%, rgba(50,50,150,0.5) 100%);">
<p id="sv">Survol</p>
<img id="bw1" class="bw" src="http://ekladata.com/MdHx2kvZ3hJMDB7j-godJhVFOhk.jpg" alt="" /> <img id="bw2" class="bw" src="http://ekladata.com/yjGEfjH_WG8sO1XRLCW2Whl2Lis.jpg" alt="" /> <img id="bw3" class="bw" src="http://ekladata.com/ME20atACODfUVrIBcHsNichH5J4.jpg" alt="" /> <img id="bw4" class="bw" src="http://ekladata.com/layFlFeri2tC6Qem826QHsZF1a4.jpg" alt="" /> <img id="bw5" class="bw" src="http://ekladata.com/l37Akps-dm1gKqMjtMQVb-B9TK4.jpg" alt="" /></div>

<style><!--
#sv{position:absolute; z-index:1; width:1000px; font-size:25px; transform:translate(300px,10px);}
.bw{position:absolute; z-index:1; width:1000px; height:562px; transform:translate(0px,0px); transition:all 1s;}
#bw1{clip-path:polygon(10% 0%, 30% 0%, 20% 70%, 20% 70%);}
#bw2{clip-path:polygon(40% 0%, 60% 0%, 50% 70%, 50% 70%);}
#bw3{clip-path:polygon(70% 0%, 90% 0%, 80% 70%, 80% 70%);}
#bw4{clip-path:polygon(35% 30%, 35% 30%, 45% 100%, 25% 100%);}
#bw5{clip-path:polygon(65% 30%, 65% 30%, 75% 100%, 55% 100%);}
#bw1:hover,#bw2:hover,#bw3:hover,#bw4:hover,#bw5:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>