• Montage 335

    5 images au ratio 16/9, 1 redimensionnée par le code en 600x338px et 4 en 900x506px.

    Clic sur l'image pour faire apparaître 4 images à survoler.
    Retour par un clic sur une image.

     

     

     

     

    <div style="position: relative; overflow: hidden; width: 900px; height: 506px; margin: 10px auto; border: 1px solid black; text-align: left; background: linear-gradient(to top, #f1e767 0%,#feb645 100%);">
    <p id="sp0">Clic sur l'image pour faire appara&icirc;tre 4 images &agrave; survoler.<br />Retour par un clic sur une image.</p>
    <input id="sp1" src="http://ekladata.com/wVqkoTCERiJuZqRtLptFvEYP-ME@600x338.jpg" type="image" />
    <p id="sp2" class="sp">&nbsp;</p>
    <p id="sp3" class="sp">&nbsp;</p>
    <p id="sp4" class="sp">&nbsp;</p>
    <p id="sp5" class="sp">&nbsp;</p>
    </div>
    <style><!--
    #sp0{position:absolute; z-index:1; width:900px; height:25px; text-align:center; font-size:25px; color:white; text-shadow:2px 2px black;}
    #sp1{position:absolute; z-index:1; width:600px; height:338px; border:3px solid white; transform:translate(150px,100px);}
    .sp{position:absolute; z-index:1; width:450px; height:253px; border:3px solid white; transition:all 1s linear;}
    #sp2{box-sizing:border-box; background:url('http://ekladata.com/U7nApumTr5h07yPwcaVEPk-g5ac@900x506.jpg'); background-size:cover; transform:translate(-450px, 0px);}
    #sp3{box-sizing:border-box; background:url('http://ekladata.com/HmDSAYp9y11IJMHDibDbt0fJr7w@900x506.jpg'); background-size:cover; transform:translate(-450px, 253px);}
    #sp4{box-sizing:border-box; background:url('http://ekladata.com/1G9lo_lNwP8t2CUQc22cDlNSA80@900x506.jpg'); background-size:cover; transform:translate(900px, 0px);}
    #sp5{box-sizing:border-box; background:url('http://ekladata.com/dL5nbZwKpsfxz0Oa0O86R2nAsC8@900x506.jpg'); background-size:cover; transform:translate(900px, 253px);}
    #sp1:focus ~ #sp2{transform:translate(0px, 0px);}
    #sp1:focus ~ #sp3{transform:translate(0px, 253px);}
    #sp1:focus ~ #sp4{transform:translate(450px, 0px);}
    #sp1:focus ~ #sp5{transform:translate(450px, 253px);}
    #sp2:hover{z-index:5; box-sizing:border-box; width:900px; height:506px;}
    #sp3:hover{z-index:5; box-sizing:border-box; width:900px; height:506px; margin:-253px 0 0 0;}
    #sp4:hover{z-index:5; box-sizing:border-box; width:900px; height:506px;margin:0 0 0 -450px;}
    #sp5:hover{z-index:5; box-sizing:border-box; width:900px; height:506px; margin:-253px 0 0 -450px;}
    --></style>