• Exemple 9

    Survol

     

     


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.6vh ridge white; box-shadow: 0.5vh 0.5vh 0.8vh black; text-align: left; background: radial-gradient(ellipse at center, #f3e2c7 0%,#c19e67 50%,#b68d4c 51%,#e9d4b3 100%);">
    <p id="rd0">Survol</p>
    <p id="rd1">&nbsp;</p>
    <p id="rd2">&nbsp;</p>
    <img id="av1" class="av" src="http://ekladata.com/0qKUlWfs60avkrlGkPB8YrGv694@1536x864.jpg" alt="" /> <img id="av2" class="av" src="http://ekladata.com/S4uQRGCMx_1X9s7QEUNuMa6UW2s@1536x864.jpg" alt="" /> <img id="av3" class="av" src="http://ekladata.com/kOBbFeIC6NKIieJ6J9RFi15Gh-8@1536x864.jpg" alt="" /> <img id="av4" class="av" src="http://ekladata.com/nHgCotiEXdiTPtsmiMvd7UjoNO8@1536x864.jpg" alt="" /> <img id="av5" class="av" src="http://ekladata.com/yysoykr2jiy-DxKAHUET19EuZEk@1536x864.jpg" alt="" /> <img id="av6" class="av" src="http://ekladata.com/trSpRKuDmEj_yl0Cf-jqcet_Jro@1536x864.jpg" alt="" /> <img id="av7" class="av" src="http://ekladata.com/UEdtjHsFZvm-eNQmFeOGfsp3Xqw@1536x864.jpg" alt="" /> <img id="av8" class="av" src="http://ekladata.com/acq79SdaCeNzznx_Fv8O2HTKehk@1536x864.jpg" alt="" /></div>

    <style><!--
    #rd0{position:absolute; z-index:1; width:15vw; text-align:center; font-size:2vw; color:brown; text-shadow:0.1vh 0.1vh black;transform:translate(22.5vw,1vw);}
    #rd1{position:absolute; z-index:1; width:25vw; height:25vw; border:0.6vh solid grey; border-radius:50%; box-shadow:0.4vh 0.4vh 0.8vh black; transform:translate(4.3vw,4vw);background: linear-gradient(to bottom, #99cc88 0%,#ccffff 100%);}
    #rd2{position:absolute; z-index:1; width:25vw; height:25vw; border:0.6vh solid grey; border-radius:50%; box-shadow:0.4vh 0.4vh 0.8vh black; transform:translate(30vw,4vw);background: linear-gradient(to bottom, #99cc88 0%,#ccffff 100%);}
    .av{position:absolute; z-index:1; width:7vw; height:7vw; border-radius:50%; border:0.3vh solid white; box-shadow:0.3vh 0.3vh 0.6vh black; transition:all 1s linear;}
    #av1{transform:translate(13.5vw,6vw);}
    #av2{transform:translate(21vw,12.5vw);}
    #av3{transform:translate(13.5vw,20vw);}
    #av4{transform:translate(6vw,12.5vw);}
    #av5{transform:translate(39.5vw,6vw);}
    #av6{transform:translate(47vw,12.5vw);}
    #av7{transform:translate(39.5vw,20vw);}
    #av8{transform:translate(32vw,12.5vw);}
    #av1:hover,#av2:hover,#av3:hover,#av4:hover,#av5:hover,#av6:hover,#av7:hover,#av8:hover{z-index:5; width:60vw; height:33.75vw; border:none; box-shadow:none; border-radius:0%; transform:translate(0vw,0vw);}
    --></style>