• Exemple 23

    8+1 images horizontales au ratio 16/9. Survol.

     

     

     

     

     

     

     

     

    <div style="width: 60vw; height: 33.75vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black; background:url('http://ekladata.com/XC4d94m-Po6Pb_SPC13TRvKdeo0@1152x648.jpg'); background-size:cover;">
    <p id="une" class="ong">&nbsp;</p>
    <p id="deux" class="ong">&nbsp;</p>
    <p id="trois" class="ong">&nbsp;</p>
    <p id="quatre" class="ong">&nbsp;</p>
    <p id="cinq" class="ong">&nbsp;</p>
    <p id="six" class="ong">&nbsp;</p>
    <p id="sept" class="ong">&nbsp;</p>
    <p id="huit" class="ong">&nbsp;</p>
    </div>
    <style type="text/css"><!--
    .ong {position:absolute; z-index:1; width: 4vw; height: 7vw; border: 0.3vh ridge white; filter:grayscale(1); transition: transform 1s linear 0s, width 1s linear 0s, height 1s linear 0s, background 1s linear 0s, filter 1s linear 1s;}
    #une{background:url('http://ekladata.com/6erQAV4ZsfgsB727Y9ht3O3wnUE@1152x648.jpg'); background-size:60vw 33.75vw; background-position:0vw -2vw; transform:translate(0vw,2vw) perspective(20vw) rotatey(60deg); transform-origin: center left; box-sizing:border-box;}
    #deux{background:url('http://ekladata.com/Q_m07eX5_m-T2LTUUxo9ShEuLg4@1152x648.jpg'); background-size:60vw 33.75vw; background-position:0vw -10vw; transform:translate(0vw,10vw) perspective(20vw) rotatey(60deg); transform-origin: center left; box-sizing:border-box;}
    #trois{background:url('http://ekladata.com/earMGEZilNPqEV_P1k_YWQ4RgOo@1152x648.jpg'); background-size:60vw 33.75vw; background-position:0vw -18vw; transform:translate(0vw,18vw) perspective(20vw) rotatey(60deg); transform-origin: center left; box-sizing:border-box;}
    #quatre{background:url('http://ekladata.com/dVno0UH23QacdLYh7n0AuU6ZT4A@1152x648.jpg'); background-size:60vw 33.75vw; background-position:0vw -26vw; transform:translate(0vw,26vw) perspective(20vw) rotatey(60deg); transform-origin: center left; box-sizing:border-box;}
    #cinq{background:url('http://ekladata.com/oAFS3DaO9MMBp34lvepOMtNlqSw@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-56vw -2vw; transform:translate(56vw,2vw) perspective(20vw) rotatey(-60deg); transform-origin: center right; box-sizing:border-box;}
    #six{background:url('http://ekladata.com/2sL9r6nWXn5Ac8KhJDuZBOyYBL0@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-56vw -10vw; transform:translate(56vw,10vw) perspective(20vw) rotatey(-60deg); transform-origin: center right; box-sizing:border-box;}
    #sept{background:url('http://ekladata.com/cw9S5XLz4eanYxy9PtFx4mrSBvI@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-56vw -18vw; transform:translate(56vw,18vw) perspective(20vw) rotatey(-60deg); transform-origin: center right; box-sizing:border-box;}
    #huit{background:url('http://ekladata.com/LHe1LvSMUYwxWwVQx3_i-BaRiTM@1152x648.jpg'); background-size:60vw 33.75vw; background-position:-56vw -26vw; transform:translate(56vw,26vw) perspective(20vw) rotatey(-60deg); transform-origin: center right; box-sizing:border-box;}
    #une:hover,#deux:hover,#trois:hover,#quatre:hover,#cinq:hover,#six:hover,#sept:hover,#huit:hover{z-index:5; width: 60vw; height: 33.75vw; background-position:0vw 0vw; transform:translate(0vw,0vw) perspective(200vw) rotatey(0deg); filter:grayscale(0);}
    --></style>