• 04a.4.2024

    Montage en 1000x563px pour 4 images.

    Survol parties colorées.

     

     

     

     

     

     

     

     


    <div style="width: 1000px; height: 563px; margin: 50px auto;">
    <p id="sv">Survol parties color&eacute;es.</p>
    <p id="fd1" class="fd">&nbsp;</p>
    <p id="fd2" class="fd">&nbsp;</p>
    <p id="fd3" class="fd">&nbsp;</p>
    <p id="fd4" class="fd">&nbsp;</p>
    <p id="mg1" class="mg">&nbsp;</p>
    <p id="mg2" class="mg">&nbsp;</p>
    <p id="mg3" class="mg">&nbsp;</p>
    <p id="mg4" class="mg">&nbsp;</p>
    </div>

    <style><!--
    #sv{position:absolute; width:200px; font-size:25px; transform:translate(20px,20px);}
    .fd{position:absolute; width:200px; height:400px; border:2px solid black; border-radius:80px; filter:grayscale(1); opacity:0.5;}
    #fd1{transform:translate(40px,100px); background:url('http://ekladata.com/sqpxvWZVYb0y5I8na98tY1C4jKc.jpg'); background-size:1000px 563px; background-position:-40px -100px;}
    #fd2{transform:translate(279px,30px); background:url('http://ekladata.com/2ixSWq47D9Z3n-0zlRRCoK2Ux48.jpg'); background-size:1000px 563px; background-position:-279px -30px;}
    #fd3{transform:translate(518px,100px); background:url('http://ekladata.com/vjJEnkLoTYdivyGmiSSJAJTjtdY.jpg'); background-size:1000px 563px; background-position:-518px -100px;}
    #fd4{transform:translate(757px,30px); background:url('http://ekladata.com/WA9v8EFQTccSnj-qIrEjeErR_wA.jpg'); background-size:1000px 563px; background-position:-757px -30px;}
    .mg{position:absolute; width:150px; height:200px; border-radius:50px; box-shadow:inset 4px 4px 6px black, inset -4px -4px 6px white; transition:all 1s;}
    #mg1{transform:translate(65px,275px); background:url('http://ekladata.com/sqpxvWZVYb0y5I8na98tY1C4jKc.jpg'); background-size:1000px 563px; background-position:-65px -275px;}
    #mg2{transform:translate(304px,75px); background:url('http://ekladata.com/2ixSWq47D9Z3n-0zlRRCoK2Ux48.jpg'); background-size:1000px 563px; background-position:-304px -75px;}
    #mg3{transform:translate(543px,275px); background:url('http://ekladata.com/vjJEnkLoTYdivyGmiSSJAJTjtdY.jpg'); background-size:1000px 563px; background-position:-543px -275px;}
    #mg4{transform:translate(782px,75px); background:url('http://ekladata.com/WA9v8EFQTccSnj-qIrEjeErR_wA.jpg'); background-size:1000px 563px; background-position:-782px -75px;}
    #mg1:hover,#mg2:hover,#mg3:hover,#mg4:hover{z-index:5; width:1000px; height:563px; transform:translate(0px,0px); background-position:0px 0px;}
    --></style>