Plein Ecran 22

<div style="width: 60vw; height: 12vw; margin: 1vh auto;">
<div style="float: left; width: 6vw; height: 6vw; border: 0.1vh solid black; text-align: left; background: radial-gradient(ellipse at center, #d5cea6 0%,#c9c190 40%,#ff9966 100%);"><input id="ab2" type="text" /> <img id="ab3" src="http://ekladata.com/6CwUG8RAR72crKssYtcCjd672zY.jpg" alt="" /></div>
<div style="float: left; width: 6vw; height: 6vw; border: 0.1vh solid black; text-align: left; margin: 0 1vw; background: radial-gradient(ellipse at center, #d5cea6 0%,#c9c190 40%,#33ffcc 100%);"><input id="bb2" type="text" /> <img id="bb3" src="http://ekladata.com/m1JMkM5bdqRdewH3WvjB0i-yQ9c.jpg" alt="" /></div>
<div style="float: left; width: 6vw; height: 6vw; border: 0.1vh solid black; text-align: left; background: radial-gradient(ellipse at center, #d5cea6 0%,#c9c190 40%,#99ffff 100%);"><input id="cb2" type="text" /> <img id="cb3" src="http://ekladata.com/VbSeZF5p5s6_OBit9ENc764Fza0.jpg" alt="" /></div>
<div style="float: left; width: 6vw; height: 6vw; border: 0.1vh solid black; text-align: left; margin: 0 1vw; background: radial-gradient(ellipse at center, #d5cea6 0%,#c9c190 40%,#cc6600 100%);"><input id="db2" type="text" /> <img id="db3" src="http://ekladata.com/6bGTkcIg1j7zyGWAPMBNbXk-VJU.jpg" alt="" /></div>
<div style="float: left; width: 6vw; height: 6vw; border: 0.1vh solid black; text-align: left; background: radial-gradient(ellipse at center, #d5cea6 0%,#c9c190 40%,#339933 100%);"><input id="eb2" type="text" /> <img id="eb3" src="http://ekladata.com/B_qWIIUJ2raSxBwJ2s9LsU5lP-o.jpg" alt="" /></div>
<div style="float: left; width: 6vw; height: 6vw; border: 0.1vh solid black; text-align: left; margin: 0 1vw; background: radial-gradient(ellipse at center, #d5cea6 0%,#c9c190 40%,#00ffff 100%);"><input id="fb2" type="text" /> <img id="fb3" src="http://ekladata.com/5nI1GMmXQz_lDdfkmyQK2mqXQpY.jpg" alt="" /></div>
<div style="float: left; width: 6vw; height: 6vw; border: 0.1vh solid black; text-align: left; background: radial-gradient(ellipse at center, #d5cea6 0%,#c9c190 40%,#ffcccc 100%);"><input id="gb2" type="text" /> <img id="gb3" src="http://ekladata.com/teYplWQaguoLKQX-H_4h8-68glg.jpg" alt="" /></div>
<div style="float: left; width: 6vw; height: 6vw; border: 0.1vh solid black; text-align: left; margin: 0 1vw; background: radial-gradient(ellipse at center, #d5cea6 0%,#c9c190 40%,#993300 100%);"><input id="hb2" type="text" /> <img id="hb3" src="http://ekladata.com/-O1yjz8J7xaJgaMEmjKxHMHXNjU.jpg" alt="" /></div>
</div>
<style><!--
#ab2{position:absolute;z-index:2;width:5vw; height:5vw; border-radius:50%; transform:translate(0.5vw,0.5vw); background:url('http://ekladata.com/6CwUG8RAR72crKssYtcCjd672zY@192x81.jpg'); background-size:cover; background-position:50% 50%; opacity:0;}
#bb2{position:absolute;z-index:2;width:5vw; height:5vw; border-radius:50%; transform:translate(0.5vw,0.5vw); background:url('http://ekladata.com/m1JMkM5bdqRdewH3WvjB0i-yQ9c@192x81.jpg'); background-size:cover; background-position:50% 50%; opacity:0;}
#cb2{position:absolute;z-index:2;width:5vw; height:5vw; border-radius:50%; transform:translate(0.5vw,0.5vw); background:url('http://ekladata.com/VbSeZF5p5s6_OBit9ENc764Fza0@192x81.jpg'); background-size:cover; background-position:50% 50%; opacity:0;}
#db2{position:absolute;z-index:2;width:5vw; height:5vw; border-radius:50%; transform:translate(0.5vw,0.5vw); background:url('http://ekladata.com/6bGTkcIg1j7zyGWAPMBNbXk-VJU@192x81.jpg'); background-size:cover; background-position:50% 50%; opacity:0;}
#eb2{position:absolute;z-index:2;width:5vw; height:5vw; border-radius:50%; transform:translate(0.5vw,0.5vw); background:url('http://ekladata.com/B_qWIIUJ2raSxBwJ2s9LsU5lP-o@192x81.jpg'); background-size:cover; background-position:50% 50%; opacity:0;}
#fb2{position:absolute;z-index:2;width:5vw; height:5vw; border-radius:50%; transform:translate(0.5vw,0.5vw); background:url('http://ekladata.com/5nI1GMmXQz_lDdfkmyQK2mqXQpY@192x81.jpg'); background-size:cover; background-position:50% 50%; opacity:0;}
#gb2{position:absolute;z-index:2;width:5vw; height:5vw; border-radius:50%; transform:translate(0.5vw,0.5vw); background:url('http://ekladata.com/teYplWQaguoLKQX-H_4h8-68glg@192x81.jpg'); background-size:cover; background-position:50% 50%; opacity:0;}
#hb2{position:absolute;z-index:2;width:5vw; height:5vw; border-radius:50%; transform:translate(0.5vw,0.5vw); background:url('http://ekladata.com/-O1yjz8J7xaJgaMEmjKxHMHXNjU@192x81.jpg'); background-size:cover; background-position:50% 50%; opacity:0;}

#ab3,#bb3,#cb3,#db3,#eb3,#fb3,#gb3,#hb3{position:absolute; z-index:100;width:0vw; height:56.25vw; left:0; transition:all 1s linear;}

#ab2:hover,#bb2:hover,#cb2:hover,#db2:hover,#eb2:hover,#fb2:hover,#gb2:hover,#hb2:hover{opacity:1;}
#ab2:focus ~ #ab3,#bb2:focus ~ #bb3,#cb2:focus ~ #cb3,#db2:focus ~ #db3,#eb2:focus ~ #eb3,#fb2:focus ~ #fb3,#gb2:focus ~ #gb3,#hb2:focus ~ #hb3{width:100vw;}
--></style>