-
Montage 335
5 images au ratio 16/9, 1 redimensionnée par le code en 600x338px et 4 en 900x506px.
<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ître 4 images à 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"> </p>
<p id="sp3" class="sp"> </p>
<p id="sp4" class="sp"> </p>
<p id="sp5" class="sp"> </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>