Montage 327a

Un premier montage pour 6+1 images au ratio 16/9, en 900px par 506px, au SURVOL. (commande:hover)

Survol

<div style="width: 900px; height: 506px; margin: 10px auto; text-align: left; background: url('http://ekladata.com/86q4kjjQ8iIJRMzF3N43OYC-ZH0@900x506.jpg'); background-size: cover;">
<p id="prt0">Survol</p>
<img id="prt1" class="prt" src="http://ekladata.com/ACps-8PHyFsCsBT3TF0ZqlzeScU@900x506.jpg" alt="" /> <img id="prt2" class="prt" src="http://ekladata.com/VQRTM4_hJVu9DUU_27ZisMhTk8A@900x506.jpg" alt="" /> <img id="prt3" class="prt" src="http://ekladata.com/Lp13tqfvI2sH_k1m-DRb5OgPhHY@900x506.jpg" alt="" /> <img id="prt4" class="prt" src="http://ekladata.com/T87_YyXzV8Aec2AA6iNbGHEW5_g@900x506.jpg" alt="" /> <img id="prt5" class="prt" src="http://ekladata.com/_3P98Z-eYtKe-y9zxcmEXqGsSIY@900x506.jpg" alt="" /> <img id="prt6" class="prt" src="http://ekladata.com/ShfgKQlFexgUFfR6FyvlfSMrnZs@900x506.jpg" alt="" /></div>
<style><!--
#prt0{position:absolute; z-index:1; width:900px; height:60px; background:rgba(0,0,0,0.5); font-size:2vw; color:white; line-height:60px;}
.prt{position:absolute; z-index:1; width:100px; height:56px; border:2px solid white; transition:all 1s linear;}
#prt1{transform:translate(150px,0px);}
#prt2{transform:translate(270px,0px);}
#prt3{transform:translate(390px,0px);}
#prt4{transform:translate(510px,0px);}
#prt5{transform:translate(630px,0px);}
#prt6{transform:translate(750px,0px);}
#prt1:hover,#prt2:hover,#prt3:hover,#prt4:hover,#prt5:hover,#prt6:hover{z-index:5; width:900px; height:506px; transform:translate(0px,0px);}
--></style>