• Art.10.5.21

     Pas simple de faire des montages avec des images horizontales et verticales ensemble; il vaut mieux assembler le même genre d'images: ici en ratio 16/9.

    S U R V O L

     

     

     

     

     

     

    <div style="width:486px; height:864px; border:1px solid black; margin:20px auto; text-align:left; background: linear-gradient(to bottom, #e4efc0 0%,#abbd73 100%);">
    <p id="plu0">S U R V O L</p>
    <p id="plu1" class="plu">&nbsp;</p>
    <p id="plu2" class="plu">&nbsp;</p>
    <p id="plu3" class="plu">&nbsp;</p>
    <p id="plu4" class="plu">&nbsp;</p>
    <p id="plu5" class="plu">&nbsp;</p>
    <p id="plu6" class="plu">&nbsp;</p>
    </div>
    <style><!--
    #plu0{position:absolute; z-index:1; width:40px; height:400px; text-align:center; font-size:30px; transform:translate(220px,100px);}
    .plu{position:absolute; z-index:1; width:200px; height:250px; border:4px solid white; transition:all 1s;}
    #plu1{box-sizing:border-box; background:url('http://ekladata.com/eMzEi_UHaHYsNkYPruo2ndyBMVg.jpg'); background-size:486px 864px; background-position:0px 0px; transform:translate(0px,0px);}
    #plu2{box-sizing:border-box; background:url('http://ekladata.com/u82XF5JGX2jghQRGJj9X321SG64.jpg'); background-size:486px 864px; background-position:0px -307px; transform:translate(0px,307px);}
    #plu3{box-sizing:border-box; background:url('http://ekladata.com/GudwEnAj-qwf1Aj-nRlQIbh0zxk.jpg'); background-size:486px 864px; background-position:0px -614px; transform:translate(0px,614px);}
    #plu4{box-sizing:border-box; background:url('http://ekladata.com/DepI-OhkprhuOXdqntU8Skaotmo.jpg'); background-size:486px 864px; background-position:-286px 0px; transform:translate(286px,0px);}
    #plu5{box-sizing:border-box; background:url('http://ekladata.com/b2H6bm0CbtM7P6uDQrMEVeJ568M.jpg'); background-size:486px 864px; background-position:-286px -307px; transform:translate(286px,307px);}
    #plu6{box-sizing:border-box; background:url('http://ekladata.com/-T3elioJGOdXwtZqkEu_QxgQECA.jpg'); background-size:486px 864px; background-position:-286px -614px; transform:translate(286px,614px);}
    #plu1:hover,#plu2:hover,#plu3:hover,#plu4:hover,#plu5:hover,#plu6:hover{z-index:5; width:486px; height:864px; background-position:0px 0px;transform:translate(0px,0px);}
    --></style>