Autre fleur

Article publié en 80vw/92vh,ici en 60x69vh, soit 60% de l'écran de lecture.

Remplacez les adresses de mes images, en rouge, par les vôtres, quel que soit leur format au ratio 16/9.

<div style="width: 60vw; height: 69vh; border: 0.1vh solid red; margin: 2vh auto;">
<p id="p0a">&nbsp;</p>
<p id="p0b">&nbsp;</p>
<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><!--
#p0a{position:absolute; z-index:1; width:60vw; height:69vh; background:linear-gradient(to bottom, rgba(100,100,100,0.5) 0%, rgba(0,0,0,0.2) 100%);}
#p0b{position:absolute; z-index:1; width:60vw; height:69vh; background:url('http://ekladata.com/xVrfZ6PG-SvCd05M4qTbizLpJRc.jpg'); background-size:60vw 69vh; opacity:0.5;}
#p1{position:absolute; z-index:1; width:10vw; height:12vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(16vw,10vh) rotate(55deg); border:0.1vh solid green; box-sizing:border-box; background:url('http://ekladata.com/j_04Dk2AnUJ-6Md3BEyG9EZld-w.jpg'); background-size:cover; transition:all 1s linear;}
#p2{position:absolute; z-index:1; width:10vw; height:12vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(28vw,10vh) rotate(-55deg); border:0.1vh solid purple; box-sizing:border-box; background:url('http://ekladata.com/qXwYlV_HCRDzoA5lHRjA-h_3oWk.jpg'); background-size:cover; transition:all 1s linear;}
#p3{position:absolute; z-index:1; width:10vw; height:12vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(16vw,42vh) rotate(-55deg); border:0.1vh solid purple; box-sizing:border-box; background:url('http://ekladata.com/ZN6sIPAf3QFzZV_zmvcKrZHvGsg.jpg'); background-size:cover;transition:all 1s linear;}
#p4{position:absolute; z-index:1; width:10vw; height:12vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(28vw,42vh) rotate(55deg) ; border:0.1vh solid grey; box-sizing:border-box; background:url('http://ekladata.com/i1N2WliM4ocBp1BlYg7PCWj4HzU.jpg'); background-size:cover;transition:all 1s linear;}
#p5{position:absolute; z-index:1; width:10vw; height:12vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(12vw,27vh) rotate(0deg); border:0.1vh solid purple; box-sizing:border-box; background:url('http://ekladata.com/0bu3lBfg_tAEvo4kMaW-NkViv28.jpg'); background-size:cover;transition:all 1s linear;}
#p6{position:absolute; z-index:1; width:10vw; height:12vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(32vw,27vh) rotate(0deg) ; border:0.1vh solid grey; box-sizing:border-box; background:url('http://ekladata.com/yFRlZSt28Z7j7pq7QGYmfRI9SYs.jpg'); background-size:cover;transition:all 1s linear;}
#p7{position:absolute; z-index:1; width:10vw; height:20vh; border-radius:50%; box-shadow:inset 0vh 0vh 2vh black; transform:translate(22vw,22vh) rotate(0deg) ; border:0.1vh solid grey; box-sizing:border-box; background:url('http://ekladata.com/fNubA6GOZ-FE2392B4cFf9q63QU.jpg'); background-size:cover;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:10; width:60vw; height:69vh; transform:translate(0vw,0vh) rotate(0deg); border-radius:0%;}
--></style>