Tiges

4 images horizontales en 1200px par 675px et 2 images verticales en 380px par 675px.

On peut ajouter des feuilles et /ou une branche en plaçant le type d'images que vous souhaitez.


<div style="position:relative; overflow:hidden; width:1200px; height:675px; border:4px ridge grey; background: lightgreen; margin:50px 0px 50px -25px;">

<p id="tg1">&nbsp;</p>

<p id="tg2">&nbsp;</p>

<p id="tg0">Survol Feuilles.</p>  

<p id="fl1" class="fl">&nbsp;</p>

<p id="fl2" class="fl">&nbsp;</p>

<p id="fl3" class="fl">&nbsp;</p>

<p id="fl4" class="fl">&nbsp;</p>

<p id="fl5" class="fl">&nbsp;</p>

<p id="fl6" class="fl">&nbsp;</p>   

</div>

<style><!--

#tg1{position:absolute; z-index:2; width:10px; height:730px; border:1px solid black; background-color:green; transform:translate(250px,-50px) rotate(20deg);}

#tg2{position:absolute; z-index:2; width:10px; height:730px; border:1px solid black; background-color:green; transform:translate(900px,-50px) rotate(-20deg);}

#tg0{position:absolute; z-index:2; width:200px; height:200px; font-size:35px; transform:translate(500px,250px);}  

.fl{position:absolute; z-index:1; margin-top:0px; width:150px; height:80px; border-radius:50%;border:1px solid black;  transition:all 1s;}

#fl1{background:url('https://i.goopics.net/zit8m9.jpg');transform:translate(195px,50px) rotate(60deg);}

#fl2{background:url('https://i.goopics.net/hgkofj.jpg');transform:translate(255px,290px) rotate(-20deg);}

#fl3{background:url('https://i.goopics.net/81tqq5.jpg');transform:translate(50px,450px) rotate(60deg);}

#fl4{background:url('https://i.goopics.net/w6rfnh.jpg');transform:translate(835px,80px) rotate(-40deg);}

#fl5{background:url('https://i.goopics.net/joosu2.jpg');transform:translate(765px,300px) rotate(30deg);}

#fl6{background:url('https://i.goopics.net/x6w5rd.jpg');transform:translate(980px,500px) rotate(-60deg);}

#fl1:hover,#fl2:hover,#fl3:hover,#fl5:hover{z-index:10; width:1200px; height:675px; transform:translate(0px,0px) rotate(0deg); border-radius:0%; border:none;}

#fl4:hover,#fl6:hover{z-index:10; width:380px; height:675px; transform:translate(820px,0px) rotate(0deg); border-radius:0%; border:none;}  

--></style> 

 

 

Survol Feuilles.