Montage 268

On peut varier les présentations, selon le même principe. 5 images au ratio 16/9 à survoler.

<div style="width: 900px; height: 506px; margin: 5px auto; background: white; text-align: left; border: 2px solid black;"><img id="pom1" class="pom" src="http://ekladata.com/HSR-eVeemApByE_FycD5xRIGrY0.jpg" alt="" /><img id="pom2" class="pom" src="http://ekladata.com/GmnkJ8jDCEvI24U3OtMqMiMUMXE.jpg" alt="" /><img id="pom3" class="pom" src="http://ekladata.com/GSqDzunHUauAazG5a56iRyh7LjE.jpg" alt="" /><img id="pom4" class="pom" src="http://ekladata.com/H7vux5D3JSRSJf4XU-NJiroX8bQ.jpg" alt="" /><img id="pom5" class="pom" src="http://ekladata.com/76E6KGtTBhq6pFp-HzEvQrE-IM4.jpg" alt="" /></div>
<style><!--
.pom{position:absolute; z-index:1; width:900px; height:506px; transition:all 1s linear;}
#pom1{clip-path:polygon(50% 2%, 80% 50%, 50% 98%, 20% 50%);}
#pom2{clip-path:polygon(1.2% 2%, 48.5% 2%, 19% 49%, 1.2% 49%);}
#pom3{clip-path:polygon(51.5% 2%, 99% 1.2%, 99% 49%, 81% 49%);}
#pom4{clip-path:polygon(81% 51%, 99% 51%, 99% 98%, 51.5% 98%);}
#pom5{clip-path:polygon(1.2% 51%, 19% 51%, 48.5% 98%, 1.2% 98%);}
#pom1:hover,#pom2:hover,#pom3:hover,#pom4:hover,#pom5:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
--></style>