• Exemple 5

    Le mélange d'images horizontales et verticales n'est pas toujours simple à réaliser: ici en 1152x648px.

    Je vous propose ce montage, avec 4 images verticales et 4 images horizontales en 16/9, à survoler, la taille étant paramétrée dans le code.

     

     

     

     

     

     

     

     


    <div style="width: 60vw; height: 34vw; margin: 1vh auto; text-align: left;">
    <p id="sc1" class="sc">&nbsp;</p>
    <p id="sc2" class="sc">&nbsp;</p>
    <p id="sc3" class="sc">&nbsp;</p>
    <p id="sc4" class="sc">&nbsp;</p>
    <p id="sc5" class="sc">&nbsp;</p>
    <p id="sc6" class="sc">&nbsp;</p>
    <p id="sc7" class="sc">&nbsp;</p>
    <p id="sc8" class="sc">&nbsp;</p>
    </div>

    <style><!--
    .sc{position:absolute; z-index:1; width:10vw; height:8.5vw;  border:0.4vh solid grey; transition:all 1s linear;}
    #sc1{transform:translate(20vw,0vw); background:url('http://ekladata.com/ntMRBGDfwgStIZ39WA_93je7rDE@384x653.jpg'); background-position:0vw 0vw; box-sizing:border-box;}
    #sc2{transform:translate(30vw,0vw); background:url('http://ekladata.com/uw7r-9d-fnRS7s_0Sq3597ixdZI@384x653.jpg'); background-position:-10vw 0vw; box-sizing:border-box;}
    #sc3{transform:translate(20vw,8.5vw); background:url('http://ekladata.com/UT95C6-8y6ldHojkFq8G87xxs3Y@1152x653.jpg'); background-position:-20vw -8.5vw; box-sizing:border-box;}
    #sc4{transform:translate(30vw,8.5vw); background:url('http://ekladata.com/cYWekETl_KyQywcCO6cgIDUt5Rw@1152x653.jpg'); background-position:-30vw -8.5vw; box-sizing:border-box;}
    #sc5{transform:translate(20vw,17vw); background:url('http://ekladata.com/CK-AzemYWF7WtvWhzI0knO3KheA@384x653.jpg'); background-position:-20vw -17vw; box-sizing:border-box;}
    #sc6{transform:translate(30vw,17vw); background:url('http://ekladata.com/hPF94P_26nDUfcyS7_R4tC19g_Y@384x653.jpg'); background-position:-30vw -17vw; box-sizing:border-box;}
    #sc7{transform:translate(20vw,25.5vw); background:url('http://ekladata.com/dgxd3Ru62zf3Q9887lTxBU7-lqo@1152x653.jpg'); background-position:-20vw -25.5vw; box-sizing:border-box;}
    #sc8{transform:translate(30vw,25.5vw); background:url('http://ekladata.com/zeipSBQnm3-KUsT-aMMKUcxye4g@1152x653.jpg'); background-position:-30vw -25.5vw; box-sizing:border-box;}
    #sc1:hover{z-index:5;width:20vw; height:34vw; transform:translate(20vw,0vw); background-position:0vw 0vw;}
    #sc2:hover{z-index:5;width:20vw; height:34vw; transform:translate(20vw,0vw); background-position:0vw 0vw;}
    #sc5:hover{z-index:5;width:20vw; height:34vw; transform:translate(20vw,0vw); background-position:-20vw 0vw;}
    #sc6:hover{z-index:5;width:20vw; height:34vw; transform:translate(20vw,0vw); background-position:-20vw 0vw;}
    #sc3:hover{z-index:5;width:60vw; height:34vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    #sc4:hover{z-index:5;width:60vw; height:34vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    #sc7:hover{z-index:5;width:60vw; height:34vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    #sc8:hover{z-index:5;width:60vw; height:34vw; transform:translate(0vw,0vw); background-position:0vw 0vw;}
    --></style>