• Art.20.7.21

     7 images au ratio 16/9, dimensionnées en 1000px par 562px par le code.

    SURVOL

     

     

     

     

     

     

    ******************
    <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/Px_rL9442ey26eN7SA31-iT4BhY@1000x562.jpg'); background-size: 1000px 562px;"><span id="zr0">SURVOL</span>
    <p id="zr1" class="zr">&nbsp;</p>
    <p id="zr2" class="zr">&nbsp;</p>
    <p id="zr3" class="zr">&nbsp;</p>
    <p id="zr4" class="zr">&nbsp;</p>
    <p id="zr5" class="zr">&nbsp;</p>
    <p id="zr6" class="zr">&nbsp;</p>
    </div>

    <style><!--
    #zr0{position:absolute; z-index:1; width:150px; font-size:25px; color:gold; text-shadow:2px 2px black; transform:translate(420px,20px);}
    .zr{position:absolute; z-index:1; width:1000px; height:562px; border:4px ridge white; transition:all 1s;}
    #zr1{box-sizing:border-box; background:url('http://ekladata.com/a8CyeNZ6R2HIejRODOI6Pn86lE4@1000x562.jpg'); background-size:1000px 562px; transform:translate(-970px, -30px) rotate(-45deg);}
    #zr2{box-sizing:border-box; background:url('http://ekladata.com/Nx_v_-CXZGllcbs4fVJ9b96sMaA@1000x562.jpg'); background-size:1000px 562px; transform:translate(-970px, 150px) rotate(-45deg);}
    #zr3{box-sizing:border-box; background:url('http://ekladata.com/kkHir1l2-jIv5dIDy0woTDA7nXE@1000x562.jpg'); background-size:1000px 562px; transform:translate(-970px, 330px) rotate(-45deg);}
    #zr4{box-sizing:border-box; background:url('http://ekladata.com/eyvi5rirJlwNnaHgRKQas7uQ1ms@1000x562.jpg'); background-size:1000px 562px; transform:translate(970px, -30px) rotate(45deg);}
    #zr5{box-sizing:border-box; background:url('http://ekladata.com/_EcIYoA-tE2y5j1d79K_Ks_Owmg@1000x562.jpg'); background-size:1000px 562px; transform:translate(970px, 150px) rotate(45deg);}
    #zr6{box-sizing:border-box; background:url('http://ekladata.com/-dQFIybwGqk5-Dq5t5P2LCm1qcM@1000x562.jpg'); background-size:1000px 562px; transform:translate(970px, 330px) rotate(45deg);}
    #zr1:hover,#zr2:hover,#zr3:hover,#zr4:hover,#zr5:hover,#zr6:hover{z-index:5;transform:translate(0px, 0px) rotate(0deg);}
    --></style>