En cours.JM

 <p>&nbsp;</p>

<div style="width:1200px; height:900px; border:4px ridge grey; margin:150px 0 20px -20px; background:url('https://i.goopics.net/eor4xc.jpg'); background-size:cover;">

<input id="flr1" class="flr" type="text">

<input id="flr2" class="flr" type="text">

<input id="flr3" class="flr" type="text">

<input id="flr4" class="flr" type="text">

<input id="flr5" class="flr" type="text">

<input id="flr6" class="flr" type="text">  

<input id="flr0" type="text">  

</div>

<style><!--

#flr0{position:absolute; z-index:1; width:1200px; height:900px; border:transparent; background-color:transparent; outline:none;}

.flr{position:absolute; z-index:5; width:150px; height:50px; box-sizing:border-box; border:4px ridge white; box-shadow:4px 4px 6px black; outline:none; transition:transform 1s 0s, height 1s 0.7s, border 1s 1s,background 1s 1s, margin 1s 1s, width 1s 1s;}

#flr1{box-sizing:border-box; transform:translate(0px,-80px); margin-left:25px; background:url('https://i.goopics.net/n4qwtl.jpg'); background-size:1200px 675px; background-position:-25px 0px;}

#flr2{box-sizing:border-box; transform:translate(200px,-80px); margin-left:25px; background:url('https://i.goopics.net/qu2omy.jpg'); background-size:1200px 675px; background-position:-225px 0px;}

#flr3{box-sizing:border-box; transform:translate(400px,-80px); margin-left:25px; background:url('https://i.goopics.net/nrcgld.jpg'); background-size:1200px 675px; background-position:-425px 0px;}

#flr4{box-sizing:border-box; transform:translate(600px,-80px); margin-left:25px; background:url('https://i.goopics.net/jw74rl.jpg'); background-size:1200px 675px; background-position:-625px 0px;}

#flr5{box-sizing:border-box; transform:translate(800px,-80px); margin-left:25px; background:url('https://i.goopics.net/whu4qg.jpg'); background-size:1200px 675px; background-position:-825px 0px;}

#flr6{box-sizing:border-box; transform:translate(1000px,-80px); margin-left:25px; background:url('https://i.goopics.net/1qlpfa.jpg'); background-size:1200px 675px; background-position:-1025px 0px;}  

#flr1:focus{transform:translate(0px,0px); margin-left:0px; width:1200px; height:900px; border:none; box-shadow:none; background-position:0px 0px;}

#flr2:focus{transform:translate(200px,0px); margin-left:-200px; width:1200px; height:900px; border:none; box-shadow:none; background-position:0px 0px;}

#flr3:focus{transform:translate(400px,0px); margin-left:-400px; width:1200px; height:900px; border:none; box-shadow:none; background-position:0px 0px;}

#flr4:focus{transform:translate(600px,0px); margin-left:-600px; width:1200px; height:900px; border:none; box-shadow:none; background-position:0px 0px;}

#flr5:focus{transform:translate(800px,0px); margin-left:-800px; width:1200px; height:900px; border:none; box-shadow:none; background-position:0px 0px;}

#flr6:focus{transform:translate(1000px,0px); margin-left:-1000px; width:1200px; height:900px; border:none; box-shadow:none; background-position:0px 0px;}  

#flr1:focus~#flr0,#flr2:focus~#flr0,#flr3:focus~#flr0,#flr4:focus~#flr0,#flr5:focus~#flr0,#flr6:focus~#flr0{z-index:10;}

--></style>