• Exemple 24

    Réalisation grâce à l'excellent site: https://bennettfeely.com/clippy/

    Survol

     

     

     

     

     

     

     

     

     


    Les adresses de vos images au ratio 16/9 sont redimensionnées par le code en 1152x648px.


    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.4vh ridge grey; background: linear-gradient(to bottom,#CCCCFF 0%,#FFFFCC 100%);">

    <p id="cp0">Survol</p>
    <p id="cp1" class="cp">&nbsp;</p>
    <p id="cp2" class="cp">&nbsp;</p>
    <p id="cp3" class="cp">&nbsp;</p>
    <p id="cp4" class="cp">&nbsp;</p>
    <p id="cp5" class="cp">&nbsp;</p>
    <p id="cp6" class="cp">&nbsp;</p>
    <p id="cp7" class="cp">&nbsp;</p>
    <p id="cp8" class="cp">&nbsp;</p>
    <p id="cp9" class="cp">&nbsp;</p>
    </div>
    <style><!--

    #cp0{position:absolute; z-index:1; width:10vw; font-size:1.5vw; color:brown; text-shadow:0.1vh 0.1vj black;}
    .cp{position:absolute; z-index:1; width:60vw; height:33.75vw; transition:all 1s linear;}
    #cp1{background:url('http://ekladata.com/GV4qS9psze4l3QdYw-gs_bcClOU@1152x648.jpg'); background-size:cover;clip-path: polygon(4vw 10vw, 20vw 4vw, 20vw 8vw, 4vw 14vw);}
    #cp2{background:url('http://ekladata.com/OMV8Is7Ut0P4X9OTWiFDBgSGhHc@1152x648.jpg'); background-size:cover;clip-path: polygon(4vw 18vw, 20vw 12vw, 20vw 16vw, 4vw 22vw);}
    #cp3{background:url('http://ekladata.com/IuBufne95uv85YVl5-ByPrU-O80@1152x648.jpg'); background-size:cover;clip-path: polygon(4vw 26vw, 20vw 20vw, 20vw 24vw, 4vw 30vw);}
    #cp4{background:url('http://ekladata.com/hTA-9kX5W-qu0rSK3Iu7i_-ry60@1152x648.jpg'); background-size:cover;clip-path: polygon(22vw 4vw, 38vw 10vw, 38vw 14vw, 22vw 8vw);}
    #cp5{background:url('http://ekladata.com/oAR9flFBklDG5GXqz0euo-UGvOw@1152x648.jpg'); background-size:cover;clip-path: polygon(22vw 12vw, 38vw 18vw, 38vw 22vw, 22vw 16vw);}
    #cp6{background:url('http://ekladata.com/bRf1WNPGDnklQ8hGyeW8PBvubc8@1152x648.jpg'); background-size:cover;clip-path: polygon(22vw 20vw, 38vw 26vw, 38vw 30vw, 22vw 24vw);}
    #cp7{background:url('http://ekladata.com/Aj0L30j13GoiddmrP_0oz4hLgrQ@1152x648.jpg'); background-size:cover;clip-path: polygon(40vw 10vw, 56vw 4vw, 56vw 8vw, 40vw 14vw);}
    #cp8{background:url('http://ekladata.com/Fc8Nu2RIaUonJeQKwbZBb0KwKfM@1152x648.jpg'); background-size:cover;clip-path: polygon(40vw 18vw, 56vw 12vw, 56vw 16vw, 40vw 22vw);}
    #cp9{background:url('http://ekladata.com/v1frerQJ58Rn_HFWj6JICZV2ZjI@1152x648.jpg'); background-size:cover;clip-path: polygon(40vw 26vw, 56vw 20vw, 56vw 24vw, 40vw 30vw);}
    #cp1:hover,#cp2:hover,#cp3:hover,#cp4:hover,#cp5:hover,#cp6:hover,#cp7:hover,#cp8:hover,#cp9:hover{z-index:5;clip-path: polygon(0vw 0vw, 60vw 0vw, 60vw 33.75vw, 0vw 33.75vw);}
    --></style>