07/10/2023

1+4 images, au ratio 16/9, en 1100px par 619px, animation au clic sur chaque bouton.

Le format et le nombre boutons/images est modifiable à votre convenance.

<div style="position:relative; overflow:hidden; width:1100px; height:619px; margin:30px auto; text-align:left; border:4px ridge white; box-shadow:-4px -4px 8px black; background:url('http://ekladata.com/u1MJWNbGoHhidXZjKCO6u3wdA5c.jpg'); background-size:cover;">
<input id="cd1" class="button">
<input id="cd2" class="button">
<input id="cd3" class="button">
<input id="cd4" class="button">
<img id="rem1" class="rem" src="http://ekladata.com/G9RsL0p4RD9SSS165gLc4_5z8r8.jpg">
<img id="rem2" class="rem" src="http://ekladata.com/bcdZ0J_o0dl6rRsULNP3y46ZUdQ.jpg">
<img id="rem3" class="rem" src="http://ekladata.com/-61KJ0DT222eYLXfSQlMasxoR7A.jpg">
<img id="rem4" class="rem" src="http://ekladata.com/eEpHJsVGfvoUbgMaX-q4xQb7gS0.jpg">
</div>
<style><!--
.button{position:absolute; z-index:20; width:25px; height:25px; border-radius:50%; background:coral; border:none; box-shadow:inset 3px 3px 4px black;}
.button:focus{background:green;}
#cd1{transform:translate(400px,30px);}
#cd2{transform:translate(500px,30px);}
#cd3{transform:translate(600px,30px);}
#cd4{transform:translate(700px,30px);}
.rem{position:absolute; z-index:1; width:1100px; height:619px; transition:1s linear;}
#rem1{transform:translate(-1100px,0px);}
#rem2{transform:translate(1100px,0px);}
#rem3{transform:translate(0px,-620px);}
#rem4{transform:translate(0px,620px);}
#cd1:focus ~ #rem1,#cd2:focus ~ #rem2,#cd3:focus ~ #rem3,#cd4:focus ~ #rem4{z-index:15; transition:1s linear; transform:translate(0px,0px);}
--></style>