• Pages

    Survol vignettes

     

     

     

     

     

     

     

     

     

     


    <p>Survol vignettes</p>
    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left;">
    <div id="pg1">
    <p id="ph1g" class="ph">&nbsp;</p>
    <p id="ph2g" class="ph">&nbsp;</p>
    <p id="ph3g" class="ph">&nbsp;</p>
    <p id="ph4g" class="pha">&nbsp;</p>
    <p id="ph5g" class="pha">&nbsp;</p>
    </div>
    <div id="pg2">
    <p id="ph1d" class="ph">&nbsp;</p>
    <p id="ph2d" class="ph">&nbsp;</p>
    <p id="ph3d" class="ph">&nbsp;</p>
    <p id="ph4d" class="pha">&nbsp;</p>
    <p id="ph5d" class="pha">&nbsp;</p>
    </div>
    </div>
    <hr style="width:border:0.3vh double grey;">
    ...
    <style><!--
    #pg1{ position: absolute; z-index: 1; width: 20vw; height: 23vw; border: 0.5vh solid black; background:white; transform: translate(10vw,5vw) skewY(-25deg); box-shadow: inset -2vh 0 6vh black;}
    #pg2{position: absolute; z-index: 1; width: 20vw; height: 23vw; border: 0.5vh solid black; background:white; transform: translate(30.3vw,5vw) skewY(25deg); box-shadow: inset 2vh 0 6vh black;}
    .ph{position:absolute; z-index:1; width:8vw; height:4.5vw; border:0.4vh solid white; transition:all 1s linear;}
    #ph1g{background:url('http://ekladata.com/1lBZOnQ5iL-xwEptKot-oB7qKpE@1152x648.jpg'); background-size:cover; transform:translate(2vw,2vw);}
    #ph2g{background:url('http://ekladata.com/wA7WAShg0T7mI6qFxXvP4GkKjD4@1152x648.jpg'); background-size:cover; transform:translate(2vw,9vw);}
    #ph3g{background:url('http://ekladata.com/uhybrL8S6l_jCvrWHV68RIC7jQc@1152x648.jpg'); background-size:cover; transform:translate(2vw,16vw);}
    #ph1d{background:url('http://ekladata.com/aOjzPqZasvX9OQ660jXdyhiGHqE@1152x648.jpg'); background-size:cover; transform:translate(10vw,2vw);}
    #ph2d{background:url('http://ekladata.com/JBWn7Bl47_ii4KFFv2eiN0TL7bI@1152x648.jpg'); background-size:cover; transform:translate(10vw,9vw);}
    #ph3d{background:url('http://ekladata.com/fhFPs6CzH4p7tHDmZ4ECYgswSJw@1152x648.jpg'); background-size:cover; transform:translate(10vw,16vw);}
    .pha{position:absolute; z-index:1; width:4.5vw; height:8vw; border:0.4vh solid white; transition:all 1s linear;}
    #ph4g{background:url('http://ekladata.com/t8Gdk0ToPKNL3nk8URQ2BtJoVfQ@365x648.jpg'); background-size:cover; transform:translate(12vw,3vw);}
    #ph5g{background:url('http://ekladata.com/RQblImB_4eNHATtMVW7veftarrc@365x648.jpg'); background-size:cover; transform:translate(12vw,12vw);}
    #ph4d{background:url('http://ekladata.com/YrX8EG3uSLt6ZASCOJ3wi6T40Rc@365x648.jpg'); background-size:cover; transform:translate(2vw,3vw);}
    #ph5d{background:url('http://ekladata.com/srBlWDE3Wc34rlK_NlfJnNTBwHQ@365x648.jpg'); background-size:cover; transform:translate(2vw,12vw);}
    #pg1:hover{z-index:5;}
    #ph1g:hover,#ph2g:hover,#ph3g:hover{position:absolute; z-index:10; width:60vw; height:33.75vw; transform:translate(-10.3vw,-0.7vw) skewY(25deg);}
    #ph4g:hover,#ph5g:hover{position:absolute; z-index:10; width:19vw; height:33.75vw;transform:translate(10.3vw,-0.7vw) skewY(25deg);}
    #ph4d:hover,#ph5d:hover{position:absolute; z-index:10; width:19vw; height:33.75vw;transform:translate(-6vw,-2.3vw) skewY(-25deg);}
    #ph1d:hover,#ph2d:hover,#ph3d:hover{position:absolute; z-index:10; width:60vw; height:33.75vw; transform:translate(-30.6vw,-0.5vw) skewY(-25deg);}
    --></style>