• Exemple 49

    5 images au ratio 16/9 redimensionnées dans le code en 1152x648px.

    Survol

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; border: 0.1vh solid black; margin: 1vh auto; text-align: left; background: url('http://ekladata.com/vR2qHVSsUxc8O5Fp_MNHxXpE4X0/back.jpg');">
    <p id="pr">Survol</p>
    <p id="ph1" class="ph">&nbsp;</p>
    <p id="ph2" class="ph">&nbsp;</p>
    <p id="ph3" class="ph">&nbsp;</p>
    <p id="ph4" class="ph">&nbsp;</p>
    <p id="ph5" class="ph">&nbsp;</p>
    </div>

    <style><!--
    @import url('https://fonts.googleapis.com/css?family=Marck+Script&display=swap');
    #pr{position:absolute; z-index:1; width:10vw; font-family: 'Marck Script', cursive; font-size:2vw; color:brown;}
    .ph{position:absolute; z-index:1; width:16vw; height:9vw; border:0.8vh solid white; box-shadow:0.4vh 0.4vh 0.6vh black; filter:sepia(1); transition:width 1s linear 0s, height 1s linear 0s, transform 1s linear 0s, filter 1s linear 1s;}
    #ph1{background:url('http://ekladata.com/J7v5LKI486G8rAQySeZKIfFDsDg@1152x648.jpg'); background-size:cover; transform:translate(3vw,5vw) rotate(-15deg);}
    #ph2{background:url('http://ekladata.com/_2iARH3M2sFXNY8bKM8v7GzVS8s@1152x648.jpg'); background-size:cover; transform:translate(40vw,5vw) rotate(15deg);}
    #ph3{background:url('http://ekladata.com/myoPF6gsF5drMZ9su971qcRJhko@1152x648.jpg'); background-size:cover; transform:translate(21.5vw,12vw) rotate(0deg);}
    #ph4{background:url('http://ekladata.com/aqryb0Gx-uHFsesaRypxW8zNQes@1152x648.jpg'); background-size:cover; transform:translate(3vw,20vw) rotate(15deg);}
    #ph5{background:url('http://ekladata.com/N5D4D5G4KymJjYyo-QJ2Kf1kQIY@1152x648.jpg'); background-size:cover; transform:translate(40vw,20vw) rotate(-15deg);}
    #ph1:hover,#ph2:hover,#ph3:hover,#ph4:hover,#ph5:hover{z-index:5; width:60vw; box-sizing:border-box; height:33.75vw;transform:translate(0vw,0vw) rotate(0deg); filter:sepia(0);}
    --></style>