• Exemple 56

     Une variante de la page précédente. Survol.

    5 images en 16/9 (1152x648px) légèrement déformées en 1152x653px pour simplifier les écritures !

     

     

     

     

     


    <div style="width: 60vw; height: 34vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black; background: white;">
    <p id="mal1" class="mal">&nbsp;</p>
    <p id="mal2" class="mal">&nbsp;</p>
    <p id="mal3" class="mal">&nbsp;</p>
    <p id="mal4" class="mal">&nbsp;</p>
    <p id="mal5" class="mala">&nbsp;</p>
    </div>

    <style><!--
    .mal{position:absolute; z-index:1; width:28.5vw; height:15.5vw; background-size:60vw 34vw; transition:all 1s linear;}
    .mala{position:absolute; z-index:1; width:32vw; height:32vw; border:0.5vw solid white; border-radius:50%;background-size:60vw 34vw; transition:all 1s linear;}
    #mal1{transform:translate(1vw,1vw); background:url('http://ekladata.com/6KuxqhxZnmG8MWbYP2cSNTnukcQ@1152x653.jpg'); background-position:-1vw -1vw);}
    #mal2{transform:translate(30.5vw,1vw);background:url('http://ekladata.com/nPA4EBO3od-SxwGLM_DThsJu3E0@1152x653.jpg'); background-position:-30.5vw -1vw;}
    #mal3{transform:translate(30.5vw,17.5vw);background:url('http://ekladata.com/PFVRjScVWtEdgDKoMjljSSnZld4@1152x653.jpg'); background-position:-30.5vw -17.5vw;}
    #mal4{transform:translate(1vw,17.5vw);background:url('http://ekladata.com/9zZo9bEqFVjYzlAo8_ypeZeyJ1E@1152x653.jpg'); background-position:-1vw -17.5vw;}
    #mal5{transform:translate(14vw,0.5vw);background:url('http://ekladata.com/g-i-DVKGZ9no_e9WbqxPCpNJqB8@1152x653.jpg'); background-position:-14vw -0.5vw;}
    #mal1:hover,#mal2:hover,#mal3:hover,#mal4:hover{z-index:5;transform:translate(0vw,0vw);width:60vw; height:34vw; background-position:0vw 0vw;}
    #mal5:hover{z-index:5;transform:translate(0vw,0vw);width:60vw; height:34vw; border-radius:0%; background-position:0vw 0vw;}
    --></style>