09.02.2024

Quelques rayons de soleil par cette journée pluvieuse; 5 images dimensionnées en 800x600px.

Code facilement modifiable en d'autres dimensions: remplacez les 800x600px par vos valeurs.

SURVOL

<div style="width: 800px; height: 600px; background: white; border: 4px solid white; box-shadow: 4px 4px 8px black; text-align: left; margin: 50px auto;">
<p id="bs0">SURVOL</p>
<img id="bs1" class="bs" src="http://ekladata.com/ylV2kTwbcZS2A9R1J55nPU4l-fU.jpg" alt="" /> <img id="bs2" class="bs" src="http://ekladata.com/FrRh9mq0c9ZEoVOyv8RDTRAUXIE.jpg" alt="" /> <img id="bs3" class="bs" src="http://ekladata.com/jwXcPP-DMRnQmzjOJovlJMJakIM.jpg" alt="" /> <img id="bs4" class="bs" src="http://ekladata.com/ZWX1UPKkfbsjkQwJWTBOBNBEKmQ.jpg" alt="" /> <img id="bs5" class="bs" src="http://ekladata.com/ZOOoL8fdUDbnv0P4XZIzr-7Nr4k.jpg" alt="" /></div>
<style><!--
#bs0{position:absolute; z-index:2; width:150px; height:40px; background:rgba(0,0,0,0.3); font-size:30px; color:white; text-shadow:2px 2px black; transform:translate(650px,0px);}
.bs{position:absolute; z-index:1; width:800px; height:600px; transition:all 1s;}
#bs1{clip-path:polygon(0% 0%, 100% 0%, 100% 20%, 100% 20%);}
#bs2{clip-path:polygon(0% 0%, 100% 25%, 100% 60%, 100% 60%);}
#bs3{clip-path:polygon(0% 0%, 100% 65%, 100% 100%, 65% 100%, 0% 0%);}
#bs4{clip-path:polygon(0% 0%, 60% 100%, 60% 100%, 25% 100%);}
#bs5{clip-path:polygon(0% 0%, 20% 100%, 20% 100%, 0% 100%);}
#bs1:hover,#bs2:hover,#bs4:hover,#bs5:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
#bs3:hover{z-index:5; clip-path:polygon(0% 0%, 100% 0%, 100% 100%,0% 100%, 0% 0%);}
--></style>