<div style="position:relative; overflow:hidden; width:1200px; height:675px; margin:50px 0 0 -20px; border:4px ridge grey;background: linear-gradient(45deg, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);">
<p id="zero">X</p>
<p id="cdd">Survol puis clic</p>
<input id="man1" class="man" type="text">
<input id="man2" class="man" type="text">
<input id="man3" class="man" type="text">
<input id="man4" class="man" type="text">
<input id="man5" class="man" type="text">
<input id="man6" class="man" type="text">
</div>
<style><!--
#zero{position:absolute; z-index:10; width:30px; height:30px; border:1px solid black; box-shadow:3px 3px 6px black; border-radius:50%; text-align:center; line-height:30px; font-size:28px; color:white; background:red; transform:translate(1150px,0px);}
#cdd{position:absolute; z-index:1; width:300px; font-size:25px; transform:translate(100px,0px);}
.man{position:absolute; z-index:2; width:120px; height:120px; border-radius:50%; border-color:transparent; outline:none; transition:all 1s;}
#man1{position:absolute; z-index:2; background:url('https://i.goopics.net/w7semy.jpg'); animation: micka 2.5s linear 0s infinite alternate; animation-play-state:running;}
@keyframes micka{
0%{transform:translate(50px,0px);}
100%{transform:translate(50px,550px);}}
#man2{position:absolute; z-index:2; background:url('https://i.goopics.net/sb2v1t.jpg'); animation: mickb 1.2s linear 0s infinite alternate; animation-play-state:running;}
@keyframes mickb{
0%{transform:translate(250px,0px);}
100%{transform:translate(250px,550px);}}
#man3{position:absolute; z-index:2; background:url('https://i.goopics.net/o3nanp.jpg'); animation: mickc 1.8s linear 0s infinite alternate; animation-play-state:running;}
@keyframes mickc{
0%{transform:translate(450px,0px);}
100%{transform:translate(450px,550px);}}
#man4{position:absolute; z-index:2; background:url('https://i.goopics.net/3kcu9w.jpg'); animation: mickd 2.7s linear 0s infinite alternate; animation-play-state:running;}
@keyframes mickd{
0%{transform:translate(650px,0px);}
100%{transform:translate(650px,550px);}}
#man5{position:absolute; z-index:2; background:url('https://i.goopics.net/0by4yt.jpg'); animation: micke 1.5s linear 0s infinite alternate; animation-play-state:running;}
@keyframes micke{
0%{transform:translate(850px,0px);}
100%{transform:translate(850px,550px);}}
#man6{position:absolute; z-index:2; background:url('https://i.goopics.net/6gjuok.jpg'); animation: mickf 2.8s linear 0s infinite alternate; animation-play-state:running;}
@keyframes mickf{
0%{transform:translate(1050px,0px);}
100%{transform:translate(1050px,550px);}}
#man1:hover,#man2:hover,#man3:hover,#man4:hover,#man5:hover,#man6:hover{animation-play-state:paused;}
#man1:focus,#man2:focus,#man3:focus,#man4:focus,#man5:focus,#man6:focus{z-index:5; width:1200px; height:675px; border-radius:0%; transform:translate(0px,0px)!important;animation-play-state:paused;}
--></style>