• Art.04a.10.21

    Montage en 1000x562px, ratio 16/9 pour 4 images "verticales" dimensionnées en 316x562px et 3 images "horizontales" en 1000x562px.

    Survol onglets

     

     

     

     

     

     

    ************************

    <div style="width: 1000px; height: 562px; border: 6px ridge white; margin: 20px auto; text-align: left; background: url('http://ekladata.com/QtAh04dQtXv6KyRR7FK2xlrsFWQ@1000x562.jpg'); background-size: cover;">
    <p id="mat0">Survol onglets</p>
    <p id="mat1" class="mat">&nbsp;</p>
    <p id="mat2" class="mat">&nbsp;</p>
    <p id="mat3" class="mat">&nbsp;</p>
    <p id="mat4" class="mat">&nbsp;</p>
    <p id="mat5" class="mata">&nbsp;</p>
    <p id="mat6" class="mata">&nbsp;</p>
    </div>
    <style><!--
    #mat0{position:absolute; z-index:1; width:250px; font-size:25px; color:white; text-shadow:2px 2px black; transform:translate(50px,100px);}
    .mat{position:absolute; z-index:1; width:200px; height:40px; border:6px ridge white; transition:all 1s;}
    .mata{position:absolute; z-index:1; width:40px; height:200px; border:6px ridge white; transition:all 1s;}
    #mat1{background:url('http://ekladata.com/ejiByX3yLVTUVjXPp43n3OVcS68@316x562.jpg'); background-position:-46px 0px; transform:translate(40px,-6px);}
    #mat2{background:url('http://ekladata.com/WGPIQROYYPGj9tmSpRnnJrF9PAM@316x562.jpg'); background-position:-60px 0px; transform:translate(280px,-6px);}
    #mat3{background:url('http://ekladata.com/ikJFTALWKnPoUkLBZkbod1baQUo@316x562.jpg'); background-position:-20px 0px; transform:translate(520px,-6px);}
    #mat4{background:url('http://ekladata.com/XiItALl5jK2rboeJLYXOzAkMDfI@316x562.jpg'); background-position:-70px 0px; transform:translate(748px,-6px);}
    #mat5{background:url('http://ekladata.com/sfBAn46JvMT0poYwQX91SWdOCTI@1000x562.jpg'); background-position:0px -256px; transform:translate(-6px,250px);}
    #mat6{background:url('http://ekladata.com/h1NwRyLAlUJ5loa6h37lmmhu8ZM@1000x562.jpg'); background-position:-954px -256px; transform:translate(954px,250px);}
    #mat1:hover{z-index:5; width:316px; height:562px; background-position:0px 0px; transform:translate(-6px,-6px);}
    #mat2:hover{z-index:5; width:316px; height:562px; background-position:0px 0px; transform:translate(220px,-6px);}
    #mat3:hover{z-index:5; width:316px; height:562px; background-position:0px 0px; transform:translate(500px,-6px);}
    #mat4:hover{z-index:5; width:316px; height:562px; background-position:0px 0px; transform:translate(678px,-6px);}
    #mat5:hover,#mat6:hover{z-index:5; width:1000px; height:562px; background-position:0px 0px; transform:translate(-6px,-6px);}
    --></style>