Montage 278

8 images au ratio 16/9  

Survol

<div style="width: 900px; height: 506px; margin: 5px auto; border: 1px solid black; text-align: left; background: linear-gradient(to bottom,rgba(100,0,50,0.5) 0%, rgba(0,100,200,0.5) 100%);"><img id="cp1" class="cp" src="http://ekladata.com/z2d5QCbagOodo4lsORg3Xst4Pyk.jpg" alt="" /> <img id="cp2" class="cp" src="http://ekladata.com/LiSMpW9ZcJMMa0rwRMJWnxPGtXQ.jpg" alt="" /> <img id="cp3" class="cp" src="http://ekladata.com/XrD4tV4blXjBo9hRB9y0FOYDErc.jpg" alt="" /> <img id="cp4" class="cp" src="http://ekladata.com/GCgb77y6hS9eNoYWLdefB5hzHFQ.jpg" alt="" /> <img id="cp5" class="cp" src="http://ekladata.com/H_wYn_-o-NLZiq0TQ5QbMANl8wE.jpg" alt="" /> <img id="cp6" class="cp" src="http://ekladata.com/iJp592q56AGSbkDwGpgUJylJSVE.jpg" alt="" /> <img id="cp7" class="cp" src="http://ekladata.com/CBOCvDBr4QBmrOHysjJFv3Sd6WE.jpg" alt="" /> <img id="cp8" class="cp" src="http://ekladata.com/9nGkNSLcRpAS6NCMSuiYLJ0YrRY.jpg" alt="" />
<p id="svl">Survol</p>
</div>

<style><!--
#svl{position:absolute; z-index:1; width:100px; font-size:30px; color:yellow; text-shadow:2px 2px black; transform:translate(220px,50px);}
.cp{position:absolute; z-index:1; width:900px; height:506px; filter:grayscale(1); transition:all 1s linear 0s, filter 1s linear 0.5s;}
#cp1{clip-path:polygon(10% 5%, 15% 13%, 20% 5%,17% 15%, 20% 25%,15% 17%,10% 25%, 13% 15%);}
#cp2{clip-path:polygon(45% 5%, 50% 13%, 55% 5%,52% 15%, 55% 25%,50% 17%,45% 25%, 48% 15%);}
#cp3{clip-path:polygon(80% 5%, 85% 13%, 90% 5%,87% 15%, 90% 25%,85% 17%,80% 25%, 83% 15%);}
#cp4{clip-path:polygon(30% 40%, 35% 48%, 40% 40%,37% 50%, 40% 60%,35% 52%,30% 60%, 33% 50%);}
#cp5{clip-path:polygon(65% 40%, 70% 48%, 75% 40%,72% 50%, 75% 60%,70% 52%,65% 60%, 68% 50%);}
#cp6{clip-path:polygon(10% 75%, 15% 83%, 20% 75%,17% 85%, 20% 95%,15% 87%,10% 95%, 13% 85%);}
#cp7{clip-path:polygon(45% 75%, 50% 83%, 55% 75%,52% 85%, 55% 95%,50% 87%,45% 95%, 48% 85%);}
#cp8{clip-path:polygon(80% 75%, 85% 83%, 90% 75%,87% 85%, 90% 95%,85% 87%,80% 95%, 83% 85%);}
#cp1:hover,#cp2:hover,#cp3:hover,#cp4:hover,#cp5:hover,#cp6:hover,#cp7:hover,#cp8:hover{z-index:5; clip-path:polygon(0% 0%, 50% 0%, 100% 0%,100% 50%, 100% 100%,50% 100%,0% 100%, 0% 50%); filter:grayscale(0);}
--></style>