Mont2.05.5.23

Un amusement pour terminer le menu Avril 2023 !

1+6 images au ratio 16/9, en 1100x619px.

<div style="width: 1100px; height: 619px; margin: 30px auto; text-align: left;"><input id="cd0" class="cd" type="button" value="0" /> <input id="cd1" class="cd" type="button" value="1" /> <input id="cd2" class="cd" type="button" value="2" /> <input id="cd3" class="cd" type="button" value="3" /> <input id="cd4" class="cd" type="button" value="4" /> <input id="cd5" class="cd" type="button" value="5" /> <input id="cd6" class="cd" type="button" value="6" />
<p id="exp">Survol image pour l'animer; clic bouton pour la changer.</p>
<p id="der1" class="der">&nbsp;</p>
</div>

<style><!--
.cd{position:absolute; z-index:5; width:30px; height:30px; border:none; border-radius:50%; box-shadow:inset 3px 3px 4px black;}
#cd0{transform:translate(380px,0px);}
#cd1{transform:translate(430px,0px);}
#cd2{transform:translate(480px,0px);}
#cd3{transform:translate(530px,0px);}
#cd4{transform:translate(580px,0px);}
#cd5{transform:translate(630px,0px);}
#cd6{transform:translate(680px,0px);}
#exp{position:absolute; z-index:2; width:350px; text-align:center; font-size:20px; transform:translate(375px,35px);}
.der{position:absolute; z-index:1; width:1100px; height:619px; transition:all 1.2s;}
#der1{background:url('http://ekladata.com/O2s8tGuNppWYBlf5x-lodLCDUEM.jpg'); background-size:1100px 619px; clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);}
#der1:hover{z-index:10; clip-path: polygon(0% 0%, 0% 20%, 0% 50%, 0% 80%, 0% 100%, 50% 100%, 80% 100%, 100% 100%, 100% 50%, 100% 20%, 100% 0%, 50% 0%);}
#cd1:focus ~ #der1{background:url('http://ekladata.com/45YB9mR9pSjZb81i5QQGgKhhHmg.jpg'); background:size:1100px 619px;}
#cd2:focus ~ #der1{background:url('http://ekladata.com/dcpsVtDAU01E5XkYxv6NOp_1HZA.jpg'); background:size:1100px 619px;}
#cd3:focus ~ #der1{background:url('http://ekladata.com/GZSLvaCxS9fMbHa9ortV4jjCiXU.jpg'); background:size:1100px 619px;}
#cd4:focus ~ #der1{background:url('http://ekladata.com/MOW6RSXgcp23uwqfQej8wERfsGY.jpg'); background:size:1100px 619px;}
#cd5:focus ~ #der1{background:url('http://ekladata.com/YFNZPeT6JjesBNIdmuh5nzxRRSM.jpg'); background:size:1100px 619px;}
#cd6:focus ~ #der1{background:url('http://ekladata.com/C3yDBccWbscClbMN9x-n8AO13pw.jpg'); background:size:1100px 619px;}
--></style>