Champigons

 Un petit tour dans le jardin m'a fait découvrir des champignons, près du pourrissoir; malgré le froid de ces derniers jours, la nature reprend son rythme; les perce-neige et les primevères commencent à fleurir.

Ce code permet d'utiliser soit des images horizontales, soit de images verticales soit un mélange des deux.

<div style="width:1200px; height:675px; margin:50px 0 0 -20px; border:6px ridge grey; background:white;">

<p id="cons">SURVOL</p>  

<img id="chp1" class="chph" src="https://i.goopics.net/vxe4k2.jpg">

<img id="chp2" class="chpv" src="https://i.goopics.net/adaub9.jpg">

<img id="chp3" class="chph" src="https://i.goopics.net/qg1dqm.jpg">

<img id="chp4" class="chph" src="https://i.goopics.net/kr1dbq.jpg">

<img id="chp5" class="chpv" src="https://i.goopics.net/0hoav6.jpg">

<img id="chp6" class="chph" src="https://i.goopics.net/9phrds.jpg">

</div>

<style><!--

#cons{position:absolute; z-index:1; width:150px;font-size:35px; transform:translate(525px,280px);} 

.chph{position:absolute; z-index:1; width:1200px; height:675px; transition:all 1s;}

.chpv{position:absolute; z-index:1; width:380px; height:675px; transition:all 1s;}

#chp1{clip-path:polygon(0% 0%, 30% 0%, 30% 45%,0% 45%);}

#chp2{clip-path:polygon(0% 0%, 100% 0%, 100% 45%,0% 45%); transform:translate(410px,0px);}

#chp3{clip-path:polygon(70% 0%, 100% 0%, 100% 45%,70% 45%);}

#chp4{clip-path:polygon(0% 55%, 30% 55%, 30% 100%,0% 100%);}

#chp5{clip-path:polygon(0% 55%, 100% 55%, 100% 100%,0% 100%); transform:translate(410px,0px);}

#chp6{clip-path:polygon(70% 55%, 100% 55%, 100% 100%,70% 100%);}

#chp1:hover,#chp3:hover,#chp4:hover,#chp6:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%,0% 100%);} 

#chp2:hover,#chp5:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%,0% 100%);}  

--></style>

SURVOL