Ovales.18.10.2024

<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:10;}
#ov1:focus,#ov2:focus,#ov3:focus,#ov4:focus,#ov5:focus,#ov6:focus{z-index:8;transform:translate(0px,0px) rotatey(0deg); filter:hue-rotate(0deg);}
--></style>