-
Art.13A.6.21
7 images au ratio 16/9.
<div style="position: relative; overflow: hidden; width: 1000px; height: 562px; margin: 20px auto; border: 6px ridge grey; background:linear-gradient(0deg, rgba(0, 244, 255, 1) 0%, rgba(105, 129, 190, 1) 100%);">
<p id="dej0">SURVOL</p>
<p id="dej1" class="dej"> </p>
<p id="dej2" class="dej"> </p>
<p id="dej3" class="dej"> </p>
<p id="dej4" class="dej"> </p>
<p id="dej5" class="deja"> </p>
<p id="dej6" class="deja"> </p>
<p id="dej7" class="deja"> </p>
</div>
<style><!--
#dej0{position:absolute; z-index:1; width:150px; font-size:25px; color:white; text-shadow:2px 2px black; transform:translate(425px,10px);}
.dej{position:absolute; z-index:1; width:150px; height:400px; box-shadow:inset -6px -6px 8px black, inset 6px 6px 8px white; border-radius:50%; transition:all 1s;}
.deja{position:absolute; z-index:1; width:200px; height:200px; box-shadow:inset -6px -6px 8px black, inset 6px 6px 8px white; border-radius:50%; transition:all 1s;}
#dej1{background:url('http://ekladata.com/m-ZcCxvnly2U3tCSgwEnv9Chbs8.jpg'); background-size:1000px 562px; background-position:-50px -80px; transform:translate(50px,80px);}
#dej2{background:url('http://ekladata.com/g5UlqRkoL30W8NVNKWb7pQkrETs.jpg'); background-size:1000px 562px; background-position:-300px -80px; transform:translate(300px,80px);}
#dej3{background:url('http://ekladata.com/sONqpCOxbm1t61d87vyCzISxNK8.jpg'); background-size:1000px 562px; background-position:-550px -80px; transform:translate(550px,80px);}
#dej4{background:url('http://ekladata.com/mHPHzFeXhA0XV4gFDNKMHhp852s.jpg'); background-size:1000px 562px; background-position:-800px -80px; transform:translate(800px,80px);}
#dej5{background:url('http://ekladata.com/dkvm7ddZ7h8jo-k_Mu9NaQQxb2M.jpg'); background-size:1000px 562px; background-position:-150px -180px; transform:translate(150px,180px);}
#dej6{background:url('http://ekladata.com/F2IuppxQ2XlZ530b-U7gUZNNnMM.jpg'); background-size:1000px 562px; background-position:-400px -180px; transform:translate(400px,180px);}
#dej7{background:url('http://ekladata.com/agxIEohJX1CfSlIEGPf85wRooTQ.jpg'); background-size:1000px 562px; background-position:-650px -180px; transform:translate(650px,180px);}
#dej1:hover,#dej2:hover,#dej3:hover,#dej4:hover,#dej5:hover,#dej6:hover,#dej7:hover{z-index:5; width:1000px; height:562px; border:none; border-radius:0%; box-shadow:none; background-position:0px 0px; transform:translate(0px,0px);}
--></style>