Lunaire 2

Vous pouvez modifier la présentation et l'animation très facilement.

<div style="width: 60vw; height: 7vw; margin: 0 auto; text-align: left;">
<input id="lz1" class="lz" type="text" />
<input id="lz2" class="lz" type="text" />
<input id="lz3" class="lz" type="text" />
<input id="lz4" class="lz" type="text" />
<input id="lz5" class="lz" type="text" />
<input id="lz6" class="lz" type="text" />
<input id="lz7" class="lz" type="text" />
<input id="lz8" class="lz" type="text" />
<img id="lza1" class="lza" src="http://ekladata.com/dsmbfIQ3LOlLcRCNQFs82-ytqQE.jpg" alt="" />
<img id="lza2" class="lza" src="http://ekladata.com/Bkdd9yjF1lifOGivUUUJu_4aD9c.jpg" alt="" />
<img id="lza3" class="lza" src="http://ekladata.com/DwmxavqV8yG7TYwCJ2jFBAZrXmA.jpg" alt="" />
<img id="lza4" class="lza" src="http://ekladata.com/FFl8Qt69xQOaFJSX-Z8CET9hpzQ.jpg" alt="" />
<img id="lza5" class="lza" src="http://ekladata.com/VUMdzfMcaAbXl74Sc0CKC7yDAvI.jpg" alt="" />
<img id="lza6" class="lza" src="http://ekladata.com/x3PMnPOlD6QMvt-5NGfy8Rs8KDU.jpg" alt="" />
<img id="lza7" class="lza" src="http://ekladata.com/HFl92B5Re_2EmRjl8gTw3MlaEuw.jpg" alt="" />
<img id="lza8" class="lza" src="http://ekladata.com/nwSDuXoD2R-aDW5ueND6bsmFhtw.jpg" alt="" />
</div>
<style><!--
.lz{float:left; width:7vw; height:7vw; border-raidus:50%; border-radius:50%; box-shadow:inset -0.4vh -0.4vh 0.6vh white,inset 0.4vh 0.4vh 0.6vh black; border:0.2vh solid black; font-size:2vw; text-align:center; line-height:3vw; opacity:0.3;}

#lz1{background:url('http://ekladata.com/dsmbfIQ3LOlLcRCNQFs82-ytqQE@90x90.jpg'); background-size:cover;}
#lz2{background:url('http://ekladata.com/Bkdd9yjF1lifOGivUUUJu_4aD9c@90x90.jpg'); background-size:cover;}
#lz3{background:url('http://ekladata.com/DwmxavqV8yG7TYwCJ2jFBAZrXmA@90x90.jpg'); background-size:cover;}
#lz4{background:url('http://ekladata.com/FFl8Qt69xQOaFJSX-Z8CET9hpzQ@90x90.jpg'); background-size:cover;}
#lz5{background:url('http://ekladata.com/VUMdzfMcaAbXl74Sc0CKC7yDAvI@90x90.jpg'); background-size:cover;}
#lz6{background:url('http://ekladata.com/x3PMnPOlD6QMvt-5NGfy8Rs8KDU@90x90.jpg'); background-size:cover;}
#lz7{background:url('http://ekladata.com/HFl92B5Re_2EmRjl8gTw3MlaEuw@90x90.jpg'); background-size:cover;}
#lz8{background:url('http://ekladata.com/nwSDuXoD2R-aDW5ueND6bsmFhtw@90x90.jpg'); background-size:cover;}
.lz:hover{opacity:1;}
.lza{position:absolute; z-index:100; left:0%; top:0; width:100vw; height:0vw; transition:all 1.5s linear;}
#lz1:focus ~ #lza1,#lz2:focus ~ #lza2,#lz3:focus ~ #lza3,#lz4:focus ~ #lza4,#lz5:focus ~ #lza5,#lz6:focus ~ #lza6,#lz7:focus ~ #lza7,#lz8:focus ~ #lza8{height:56.25vw;}
--></style>