• Clip 2

    Le code de mon article intéressant une fidèle visiteuse d'outre-Atlantique, le voici en 60vw/33.75vw, soit 60% de la largeur de l'écran de lecture.

    Remplacez mes adresses/images par les vôtres.

    Survol

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 2vh auto;">
    <p id="cl0">Survol</p>
    <p id="cl1">&nbsp;</p>
    <p id="cl2">&nbsp;</p>
    <p id="cl3">&nbsp;</p>
    <p id="cl4">&nbsp;</p>
    </div>
    <style><!--
    #cl0{position:absolute; z-index:1; width:10vw; text-align:center; font-size:2vw; color:white; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.5); transform:translate(25vw,0vw);}
    #cl1{position:absolute; z-index:1; width:12vw; height:12vw; transform:translate(5vw,5vw); background:url('http://ekladata.com/GcjGJ3oxpVbT0-JFgOM6UNPL1o0.jpg'); background-size:60vw 33.75vw; background-position:-5vw -5vw; -webkit-clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 508%); clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%); transition:all 1s linear; }
    #cl2{position:absolute; z-index:1; width:12vw; height:12vw; transform:translate(15vw,20vw); background:url('http://ekladata.com/ZVnEqbRzVAgwq5FmZKC2p3RXPRA.jpg'); background-size:60vw 33.75vw; background-position:-20vw -20vw; -webkit-clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 508%); clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%); transition:all 1s linear; }
    #cl3{position:absolute; z-index:1; width:12vw; height:12vw; transform:translate(25vw,5vw); background:url('http://ekladata.com/fLjX5Gm6JazeMRqKD8r9setD9bc.jpg'); background-size:60vw 33.75vw; background-position:-35vw -5vw; -webkit-clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 508%); clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%); transition:all 1s linear; }
    #cl4{position:absolute; z-index:1; width:12vw; height:12vw; transform:translate(35vw,20vw); background:url('http://ekladata.com/4Lnuzgi-3xNh9-8L9GgD0YxIprA.jpg'); background-size:60vw 33.75vw; background-position:-50vw -20vw; -webkit-clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 508%); clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%); transition:all 1s linear; }
    #cl1:hover,#cl2:hover,#cl3:hover,#cl4:hover{z-index:5; width:60vw; height:33.75vw; transform:translate(0vw,0vw);background-position:0vw 0vw; -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 0%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);}
    --></style>