Fleur 1

Suite à la demande de Ambre2, voici le principe du montage.

Le montage fait 50% en largeur et 800px en hauteur.

Les images, à remplacer par les vôtres, sont carrées pour être transformées en rond au survol:600x600px ou 700x700px.

La texture de fond est à remplacer par une couleur, un dégradé (gradient), une autre texture ou une image.

Je n'ai pas décoré le cœur et les pétales mais on peut leur donner une ombre 3D, par exemple...

<div id="cath0">
<p id="cath1">&nbsp;</p>
<p id="cath2">&nbsp;</p>
<p id="cath3">&nbsp;</p>
<p id="cath4">&nbsp;</p>
<p id="cath5">&nbsp;</p>
<p id="cath6">&nbsp;</p>
<p id="cath7">Survolez le c&oelig;ur et les p&eacute;tales de cette fleur.</p>
</div>
<style><!--
#cath0{width: 50%; height: 800px; margin: 0px auto; }
#cath1{position:absolute; z-index:1; width:200px; height:200px; border:1px solid black; border-radius:50%; background:url('http://ekladata.com/Bpj0klc_UgPchwsquIaXVIB2mxQ.jpg'); background-size:cover; transform:translate(380px,300px); transition:all 1s linear;}
#cath2{position:absolute; z-index:1; width:240px; height:135px; border:1px solid black; border-radius:50%; background:url('http://ekladata.com/WrcKnDfeeK1hvsp-AkePKHLZRww.jpg'); background-size:cover; transform:translate(360px,110px) rotate(90deg); transition:all 1s linear;}
#cath3{position:absolute; z-index:1; width:240px; height:135px; border:1px solid black; border-radius:50%; background:url('http://ekladata.com/5wmLqZRDttgHCOY3FHbitfEkiVg.jpg'); background-size:cover; transform:translate(570px,260px) rotate(-20deg); transition:all 1s linear;}
#cath4{position:absolute; z-index:1; width:240px; height:135px; border:1px solid black; border-radius:50%; background:url('http://ekladata.com/PGl9W5K6-OBZueTX3vuZczVckEM.jpg'); background-size:cover; transform:translate(500px,505px) rotate(-130deg); transition:all 1s linear;}
#cath5{position:absolute; z-index:1; width:240px; height:135px; border:1px solid black; border-radius:50%; background:url('http://ekladata.com/43yMfat9vmMeFEHvCMtmuCgY3SE.jpg'); background-size:cover; transform:translate(220px,505px) rotate(130deg); transition:all 1s linear;}
#cath6{position:absolute; z-index:1; width:240px; height:135px; border:1px solid black; border-radius:50%; background:url('http://ekladata.com/LOTu-8O_0dK7Kc1do5BuqwNwGjI.jpg'); background-size:cover; transform:translate(150px,260px) rotate(20deg); transition:all 1s linear;}
#cath7{position:absolute; z-index:1; width:700px;text-align:center;font-size:30px; color:green; text-shadow:1px 1px black; transform:translate(100px,0px);}

#cath1:hover,#cath2:hover,#cath3:hover,#cath4:hover,#cath5:hover,#cath6:hover{z-index:5; width:700px; height:700px; border-radius:50%;transform:translate(130px,50px) rotate(0deg);}
--></style>