Ovales.18.10.24

6 images au ratio 16/9 dans un montage en 1200x675px.

<div style="width: 1200px; height: 675px; margin: 50px auto; text-align: left;">

<input id="ov1" class="ov" src="http://ekladata.com/XNzOS2O47utye-esOhWM921Pah8.jpg" alt="" type="image"/> 

<input id="ov2" class="ov" src="http://ekladata.com/3zmV3NWFup3NAa5LzWqOiQxwnIU.jpg" alt="" type="image" /> 

<input id="ov3" class="ov" src="http://ekladata.com/OYb7eNOlu_Phr5VyKDpvZjW5dM8.jpg" alt="" type="image" /> 

<input id="ov4" class="ov" src="http://ekladata.com/yst8V5pjP1q9j1YZXWVCx5DE3ts.jpg" alt="" type="image" /> 

<input id="ov5" class="ov" src="http://ekladata.com/3oT1CKn6T8YIcClup2VniQeui_U.jpg" alt="" type="image" /> 

<input id="ov6" class="ov" src="http://ekladata.com/BsG9KiMmjz-p_D3jG0y2Jp-L9SQ.jpg" alt="" type="image" />

<p id="gh">Clic pour agrandir et clic pour réduire.</p>

<p id="base">&nbsp;</p>

</div>

<style><!--

.ov{position:absolute; width:1200px; height:675px; border:4px solid white; border-radius:50%; filter:hue-rotate(90deg); transition:all 1s;}

#ov1{z-index:2; box-sizing:border-box; transform:translate(0px,0px) rotatey(0deg);}

#ov2{z-index:3; box-sizing:border-box; transform:translate(0px,0px) rotatey(30deg);}

#ov3{z-index:4; box-sizing:border-box; transform:translate(0px,0px) rotatey(45deg);}

#ov4{z-index:5; box-sizing:border-box; transform:translate(0px,0px) rotatey(60deg);}

#ov5{z-index:6; box-sizing:border-box; transform:translate(0px,0px) rotatey(70deg);}

#ov6{z-index:7; box-sizing:border-box; transform:translate(0px,0px) rotatey(80deg);}

#gh{position:absolute; z-index:1; width:200px; height:auto; font-size:20px;}

#base{position:absolute; z-index:0; width:1200px; height:675px;}

#ov1:focus ~ #base,#ov2:focus ~ #base,#ov3:focus ~ #base,#ov4:focus ~ #base,#ov5:focus ~ #base,#ov6:focus ~ #base{z-index:15;}

#ov1:focus,#ov2:focus,#ov3:focus,#ov4:focus,#ov5:focus,#ov6:focus{z-index:13;transform:translate(0px,0px) rotatey(0deg); filter:hue-rotate(0deg);}

--></style>

---

Clic pour agrandir et clic pour réduire.