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('https://ekladata.com/1lBZOnQ5iL-xwEptKot-oB7qKpE@1152x648.jpg'); background-size:cover; transform:translate(2vw,2vw);}
#ph2g{background:url('https://ekladata.com/wA7WAShg0T7mI6qFxXvP4GkKjD4@1152x648.jpg'); background-size:cover; transform:translate(2vw,9vw);}
#ph3g{background:url('https://ekladata.com/uhybrL8S6l_jCvrWHV68RIC7jQc@1152x648.jpg'); background-size:cover; transform:translate(2vw,16vw);}
#ph1d{background:url('https://ekladata.com/aOjzPqZasvX9OQ660jXdyhiGHqE@1152x648.jpg'); background-size:cover; transform:translate(10vw,2vw);}
#ph2d{background:url('https://ekladata.com/JBWn7Bl47_ii4KFFv2eiN0TL7bI@1152x648.jpg'); background-size:cover; transform:translate(10vw,9vw);}
#ph3d{background:url('https://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('https://ekladata.com/t8Gdk0ToPKNL3nk8URQ2BtJoVfQ@365x648.jpg'); background-size:cover; transform:translate(12vw,3vw);}
#ph5g{background:url('https://ekladata.com/RQblImB_4eNHATtMVW7veftarrc@365x648.jpg'); background-size:cover; transform:translate(12vw,12vw);}
#ph4d{background:url('https://ekladata.com/YrX8EG3uSLt6ZASCOJ3wi6T40Rc@365x648.jpg'); background-size:cover; transform:translate(2vw,3vw);}
#ph5d{background:url('https://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>