• Automne 7

    Si vous voulez comparer le code précédent avec celui-ci, vous verrez que vous pouvez les personnaliser facilement.

     

     

     

     

     

     

    Survol

    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto; border: 0.4vh ridge white; background: radial-gradient(ellipse at center, #c9de96 0%,#8ab66b 44%,#398235 100%);">
    <p id="ab1" class="ab">&nbsp;</p>
    <p id="ab2" class="ab">&nbsp;</p>
    <p id="ab3" class="ab">&nbsp;</p>
    <p id="ab4" class="ab">&nbsp;</p>
    <p id="ab5" class="ab">&nbsp;</p>
    <p id="ab6" class="ab">&nbsp;</p>
    <p id="cc">Survol</p>
    </div>

    <style><!--
    #cc{position:absolute; z-index:1; width:15vw; text-align:center; font-size:2.5vw; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(45vw,2vw);}
    .ab{position:absolute; z-index:1; width:16vw; height:9vw; border:0.4vh solid white; box-shadow:0.3vh 0.3vh 0.5vh black; transition:all 1s linear;}
    #ab1{transform:translate(5vw,2vw) rotatex(-45deg) perspective(30vw); background:url('http://ekladata.com/uhWj9dPgCB3rMUUg2nkTpfc925c.jpg'); background-size:cover; transform-origin:top left;}
    #ab2{transform:translate(20vw,5vw) rotatex(-45deg) perspective(30vw); background:url('http://ekladata.com/kDGrNl5Omk0NQeJ0K3FTycCFz8o.jpg'); background-size:cover; transform-origin:top center;}
    #ab3{transform:translate(35vw,8vw) rotatex(-45deg) perspective(30vw); background:url('http://ekladata.com/HUVDmts9UmI8H9pdNA5DpayYZis.jpg'); background-size:cover; transform-origin:top right;}
    #ab4{transform:translate(5vw,18vw) rotatex(-45deg) perspective(30vw); background:url('http://ekladata.com/5H3jHZAetMUHMdzD7EEnsUhjH_w.jpg'); background-size:cover; transform-origin:top center;}
    #ab5{transform:translate(20vw,21vw) rotatex(-45deg) perspective(30vw); background:url('http://ekladata.com/wEQBjJPZXcDYW-m6fPLe26aGA_s.jpg'); background-size:cover; transform-origin:top center;}
    #ab6{transform:translate(35vw,24vw) rotatex(-45deg) perspective(30vw); background:url('http://ekladata.com/MF1s3FtrVHI46PsBn21NBqJjLms.jpg'); background-size:cover; transform-origin:top center;}
    #ab1:hover,#ab2:hover,#ab3:hover,#ab4:hover,#ab5:hover,#ab6:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw) rotate(0deg); border:none; box-shadow:none;}
    --></style>