• 01.04.2024

     4 images dimensionnées en 1100x619px avec un changement de filtre.

    L'animation oblige à placer, au dessus de chaque image, un bouton invisible (bt).

     

     

     

     

    SURVOL


    <div style="width: 1100px; height: 619px; margin: 50px auto; text-align: left; ">
    <p id="bt1" class="bt">&nbsp;</p>
    <p id="bt2" class="bt">&nbsp;</p>
    <p id="bt3" class="bt">&nbsp;</p>
    <p id="bt4" class="bt">&nbsp;</p>

    <p id="sv">SURVOL</p>
    <img id="jd1" class="jd" src="http://ekladata.com/6u1LDLxtQ6Vn4R-qhZp-0tCoGe0@1000x619.jpg" alt="" />
    <img id="jd2" class="jd" src="http://ekladata.com/XxQkoJI_x6h3oK7H7b5Ges6SGCY@1000x619.jpg" alt="" />
    <img id="jd3" class="jd" src="http://ekladata.com/isHDkV8yU43yekqpZ1p3ZToFGsE@1000x619.jpg" alt="" />
    <img id="jd4" class="jd" src="http://ekladata.com/YY2eNNR9ux9XoILKapT4aBdy6Wg@1000x619.jpg" alt="" />
    </div>
    <style><!--
    .bt{position:absolute; z-index:5; width:500px; height:281px;}
    #bt1{transform:translate(0px,0px);}
    #bt2{transform:translate(600px,0px);}
    #bt3{transform:translate(600px,338px);}
    #bt4{transform:translate(0px,338px);}

    #sv{position:absolute; z-index:1; width:140px; font-size:30px; transform:translate(480px,290px);}
    .jd{position:absolute; z-index:1; width:500px; height:281px; transition:all 2s;}
    #jd1{transform:translate(0px,0px) rotatey(180deg); filter:grayscale(1);}
    #jd2{transform:translate(600px,0px) rotatey(180deg); filter:sepia(1);}
    #jd3{transform:translate(600px,338px) rotatey(180deg); filter:invert(1);}
    #jd4{transform:translate(0px,338px) rotatey(180deg); filter:hue-rotate(180deg);}
    #bt1:hover ~ #jd1,#bt2:hover ~ #jd2,#bt3:hover ~ #jd3,#bt4:hover ~ #jd4{z-index:3; width:1100px; height:619px;transform:translate(0px,0px) rotatey(0deg); filter:none;}
    --></style>