Montage 327c

Même principe au clic (focus) avec retour au clic hors montage. Elément cliquable: input.

<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="prtc0">Clic</p>
<input id="prtc1" class="prtc" type="image" src="http://ekladata.com/ACps-8PHyFsCsBT3TF0ZqlzeScU@900x506.jpg" alt="" />
<input id="prtc2" class="prtc" type="image" src="http://ekladata.com/VQRTM4_hJVu9DUU_27ZisMhTk8A@900x506.jpg" alt="" />
<input id="prtc3" class="prtc" type="image" src="http://ekladata.com/Lp13tqfvI2sH_k1m-DRb5OgPhHY@900x506.jpg" alt="" />
<input id="prtc4" class="prtc" type="image" src="http://ekladata.com/T87_YyXzV8Aec2AA6iNbGHEW5_g@900x506.jpg" alt="" />
<input id="prtc5" class="prtc" type="image" src="http://ekladata.com/_3P98Z-eYtKe-y9zxcmEXqGsSIY@900x506.jpg" alt="" />
<input id="prtc6" class="prtc" type="image" src="http://ekladata.com/ShfgKQlFexgUFfR6FyvlfSMrnZs@900x506.jpg" alt="" />
</div>

<style><!--
#prtc0{position:absolute; z-index:1; width:900px; height:60px; background:rgba(0,0,0,0.5); font-size:2vw; color:white; line-height:60px;}
.prtc{position:absolute; z-index:1; width:100px; height:56px; border:2px solid white; filter:grayscale(1); transition:all 1s linear, filter 1s linear 1s;}
#prtc1{transform:translate(150px,0px);}
#prtc2{transform:translate(270px,0px);}
#prtc3{transform:translate(390px,0px);}
#prtc4{transform:translate(510px,0px);}
#prtc5{transform:translate(630px,0px);}
#prtc6{transform:translate(750px,0px);}
#prtc1:focus,#prtc2:focus,#prtc3:focus,#prtc4:focus,#prtc5:focus,#prtc6:focus{z-index:5; width:900px; height:506px; filter:grayscale(0); transform:translate(0px,0px);}
--></style>