• Art.17a.7.21

    6 images au ratio 16/9.

    Survol flèches et croix

    -->

    -->

    -->

    -->

    X

     

     

     

     

     

    ********************
    <div style="position: relative; overflow: hidden; width: 1000px; height: 562px; margin: 20px auto; text-align: left; border: 1px solid black; background: url('http://ekladata.com/xgNbSjsJQIXnkvst39NmTbnU6Io@1000x562.jpg'); background-size: cover;">
    <p id="soit0">Survol fl&egrave;ches et croix</p>
    <p id="ch1" class="ch">--&gt;</p>
    <p id="ch2" class="ch">--&gt;</p>
    <p id="ch3" class="ch">--&gt;</p>
    <p id="ch4" class="ch">--&gt;</p>
    <p id="ch5" class="ch">X</p>
    <p id="ch1a" class="cha">&nbsp;</p>
    <p id="ch2a" class="cha">&nbsp;</p>
    <p id="ch3a" class="cha">&nbsp;</p>
    <p id="ch4a" class="cha">&nbsp;</p>
    <p id="ch5a" class="cha">&nbsp;</p>
    <img id="soit1" class="soit" src="http://ekladata.com/8CrX3-Fj2MyVOZy_VD4q1X5EUv4@1000x562.jpg" alt="" /> <img id="soit2" class="soit" src="http://ekladata.com/tsQeD4DBXvPsGw5Su_rLhwVUbIA@1000x562.jpg" alt="" /> <img id="soit3" class="soit" src="http://ekladata.com/qBpEhNqJqjsOz11zfQnNi2V_zAs@1000x562.jpg" alt="" /> <img id="soit4" class="soit" src="http://ekladata.com/KSH3CngazZo-IHxTsXlD6d9ptQo@1000x562.jpg" alt="" /> <img id="soit5" class="soit" src="http://ekladata.com/LefnVH2GJlDC58qZgDUHSu-wf0U@1000x562.jpg" alt="" /></div>
    <style><!--
    #soit0{position:absolute; z-index:1; width:350px; font-size:25px; color:white; text-shadow:2px 2px black;}
    .ch{position:absolute; z-index:1; width:150px; height:80px; line-height:80px; text-align:center; font-size:75px; color:white; text-shadow:2px 2px black;}
    .cha{position:absolute; z-index:5; width:150px; height:80px;}
    #ch1, #ch1a{transform:translate(50px,200px);}
    #ch2, #ch2a{transform:translate(400px,50px) rotate(90deg);}
    #ch3, #ch3a{transform:translate(780px,200px) rotate(180deg);}
    #ch4, #ch4a{transform:translate(400px,400px) rotate(-90deg);}
    #ch5, #ch5a{transform:translate(400px,200px);}
    .soit{position:absolute; z-index:3; width:1000px; height:562px; transition:all 1s;}
    #soit1{transform:translate(-1000px,0px);}
    #soit2{transform:translate(0px,-565px);}
    #soit3{transform:translate(1000px,0px);}
    #soit4{transform:translate(0px,565px);}
    #soit5{transform:translate(470px,230px); width:0px; height:0px;}
    #ch1a:hover ~ #soit1,#ch2a:hover ~ #soit2,#ch3a:hover ~ #soit3,#ch4a:hover ~ #soit4,#ch5a:hover ~ #soit5{transform:translate(0px,0px); width:1000px; height:562px;}
    --></style>