• Paquerette

    A partir d'un montage proposé mais dont les réglages me semblaient un peu bricolés, je vous propose celui-ci, en 60vw par 69vh.

    Dans chaque pétale et dans le cœur, nous plaçons des images en fond.

    Dans le code, remplacez mes adresses d'images, en bleu, par les votre, quelles que soient leurs dimensions: le code les adapte.

     

     

     

     

     

     

     

    Survolez chaque partie de cette fleur.

    <div style="width: 60vw; height: 69vh; border: 0.1vh solid red; margin: 2vh auto; background: linear-gradient(to bottom, rgba(0,100,0,0.5) 0%, rgba(0,0,0,0.3) 100%);">
    <p id="p1">&nbsp;</p>
    <p id="p2">&nbsp;</p>
    <p id="p3">&nbsp;</p>
    <p id="p4">&nbsp;</p>
    <p id="p5">&nbsp;</p>
    <p id="p6">&nbsp;</p>
    <p id="p7">&nbsp;</p>
    <p id="p8">Survolez chaque partie de cette fleur.</p>
    </div>

    <style><!--
    #p1{position:absolute; z-index:1; width:11vw; height:23vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(18vw,1vh) rotate(45deg); border:0.1vh solid green; box-sizing:border-box; background:url('http://ekladata.com/berN4oUIAcy7-kvSZ0Sy6mtU69Y.jpg'); background-size:60vw 69vh; background-position:center center; transition:all 1s linear;}
    #p2{position:absolute; z-index:1; width:11vw; height:23vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(31vw,1vh) rotate(45deg); border:0.1vh solid purple; box-sizing:border-box; background:url('http://ekladata.com/5RAUAn_UudP1LQW4VoiVda_uEU0.jpg'); background-size:60vw 69vh; background-position:center center; transition:all 1s linear;}
    #p3{position:absolute; z-index:1; width:11vw; height:23vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(18vw,46vh) rotate(50deg); border:0.1vh solid purple; box-sizing:border-box; background:url('http://ekladata.com/xi_g0dqMZr4yOR2MXfc_Wda0uP0.jpg'); background-size:60vw 69vh; background-position:center center; transition:all 1s linear;}
    #p4{position:absolute; z-index:1; width:11vw; height:23vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(31vw,46vh) rotate(50deg) ; border:0.1vh solid grey; box-sizing:border-box; background:url('http://ekladata.com/GGLOqc2x8oCf0uu2pvIehHhM_oc.jpg'); background-size:60vw 69vh; background-position:center center; transition:all 1s linear;}
    #p5{position:absolute; z-index:1; width:11vw; height:23vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(11vw,23vh) rotate(45deg); border:0.1vh solid purple; box-sizing:border-box; background:url('http://ekladata.com/K8_6_Cq-Gmdmns7xeDc-z9LMvek.jpg'); background-size:60vw 69vh; background-position:center center; transition:all 1s linear;}
    #p6{position:absolute; z-index:1; width:11vw; height:23vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(38vw,23vh) rotate(45deg) ; border:0.1vh solid grey; box-sizing:border-box; background:url('http://ekladata.com/38677KQnjG4LSg_wZoq9QIJYt04.jpg'); background-size:60vw 69vh; background-position:center center; transition:all 1s linear;}
    #p7{position:absolute; z-index:1; width:25vw; height:50vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(18vw,9vh) rotate(0deg) ; border:0.1vh solid grey; box-sizing:border-box; background:url('http://ekladata.com/bxNFhvyDGSc3yu2Ysin--3m7VEQ.jpg'); background-size:60vw 69vh; background-position:center center; transition:all 1s linear;}
    #p8{position:absolute; z-index:1; width:10vw; text-align:center; font-size:2vw; color:white; text-shadow:0.2vh 0.2vh black;}

    #p1:hover,#p2:hover,#p3:hover,#p4:hover,#p5:hover,#p6:hover,#p7:hover{z-index:5; width:60vw; height:69vh; transform:translate(0vw,0vh) rotate(0deg); border-radius:0%;}
    --></style>