• 03a.03.2024

    Une idée de montage, en regardant la neige tomber sur les hauteurs !

    Montage en 800x600px et 4 images, modifiable dans vos dimensions; pour le nombre d'images, il faudra revoir le code. 

    Variante en dessous

    SURVOL

     

     

     

     


    <div style="width: 800px; height: 600px; margin: 50px auto; text-align: left;">

    <p id="et0">SURVOL</p>
    <p id="et1" class="et">&nbsp;</p>
    <p id="et2" class="et">&nbsp;</p>
    <p id="et3" class="et">&nbsp;</p>
    <p id="et4" class="et">&nbsp;</p>
    </div>
    <style><!--

    #et0{position:absolute; z-index:1; width:120px; font-size:25px;}
    .et{position:absolute; z-index:1; width:800px; height:600px; transition:all 1s;}
    #et1{background:url('http://ekladata.com/eI2OBz6_kaT-OM4FHczT_3AHhZE.jpg'); background-size:800px 600px; clip-path:polygon(50% 0%, 60% 35%, 50% 50%, 40% 35%);}
    #et2{background:url('http://ekladata.com/mBID38SHq95t7eRMkzi5x50lTY0.jpg'); background-size:800px 600px; clip-path:polygon(50% 50%, 60% 35%, 90% 50%, 60% 65%);}
    #et3{background:url('http://ekladata.com/Yo1GT_5P_9aKUg8X4fvwQlkqLiQ.jpg'); background-size:800px 600px; clip-path:polygon(50% 50%, 60% 65%, 50% 100%, 40% 65%);}
    #et4{background:url('http://ekladata.com/1x2zhR1Z7VHCAOC094DIR7Q5ik4.jpg'); background-size:800px 600px; clip-path:polygon(10% 50%, 40% 35%, 50% 50%, 40% 65%);}
    #et1:hover,#et2:hover,#et3:hover,#et4:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
    --></style>

    SURVOL

     

     

     

     


    <div style="width: 800px; height: 600px; margin: 50px auto; text-align: left;">

    <p id="et0a">SURVOL</p>
    <p id="et1a" class="eta">&nbsp;</p>
    <p id="et2a" class="eta">&nbsp;</p>
    <p id="et3a" class="eta">&nbsp;</p>
    <p id="et4a" class="eta">&nbsp;</p>
    </div>
    <style><!--

    #et0a{position:absolute; z-index:1; width:120px; font-size:25px;}
    .eta{position:absolute; z-index:1; width:800px; height:600px; transition:all 1s;}
    #et1a{background:url('http://ekladata.com/eI2OBz6_kaT-OM4FHczT_3AHhZE.jpg'); background-size:800px 600px; clip-path:polygon(50% 0%, 59% 34%, 50% 50%, 41% 34%);}
    #et2a{background:url('http://ekladata.com/mBID38SHq95t7eRMkzi5x50lTY0.jpg'); background-size:800px 600px; clip-path:polygon(50% 50%, 60% 36%, 90% 50%, 60% 64%);}
    #et3a{background:url('http://ekladata.com/Yo1GT_5P_9aKUg8X4fvwQlkqLiQ.jpg'); background-size:800px 600px; clip-path:polygon(50% 50%, 59% 66%, 50% 100%, 41% 66%);}
    #et4a{background:url('http://ekladata.com/1x2zhR1Z7VHCAOC094DIR7Q5ik4.jpg'); background-size:800px 600px; clip-path:polygon(10% 50%, 40% 36%, 50% 50%, 40% 64%);}
    #et1a:hover,#et2a:hover,#et3a:hover,#et4a:hover{z-index:5;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
    --></style>