Glisse

6 +1 images en 1200x675px

<div style="position:relative; overflow:hidden; width:1200px; height:675px; margin:50px 0 0 -25px; border:6px ridge grey;">

<img id="ghj0" src="https://i.goopics.net/4vya8k.jpg">

<input id="gh" type="text" value="CLIC">

<p id="ghj1" class="ghj">&nbsp;</p>

<p id="ghj2" class="ghj">&nbsp;</p>

<p id="ghj3" class="ghj">&nbsp;</p>

<p id="act1">SUR</p>

<p id="act2">VOL</p>

<p id="ghj4" class="ghj">&nbsp;</p>

<p id="ghj5" class="ghj">&nbsp;</p>

<p id="ghj6" class="ghj">&nbsp;</p>

</div>

<style><!--

#ghj0{position:absolute;z-index:2; width:1200px; height:675px;}

#gh{position:absolute;z-index:10; width:1200px; height:675px; background:transparent; out-line:none; text-align:center; padding-top:220px; font-size:80px; color:white;} 

#act1{position:absolute;z-index:3; width:80px; text-align:right; font-size: 30px; background:white; color:black; transform:translate(-100px,150px);transition:all 1s;}

#act2{position:absolute;z-index:3; width:80px; font-size: 30px; background:white; color:black; transform:translate(1300px,150px); transition:all 1s;}

.ghj{position:absolute; z-index:3; width:80px; height:500px; margin-top:0px; border:6px solid white; border-radius:40px;  transition:all 1s;} 

#ghj1{background:url('https://i.goopics.net/nnjnqg.jpg'); background-size:1200px 675px;  background-position:-50px -80px; transform:translate(-100px,80px);}

#ghj2{background:url('https://i.goopics.net/1fmspy.jpg'); background-size:1200px 675px; background-position:-180px -80px; transform:translate(-100px,80px);}

#ghj3{background:url('https://i.goopics.net/gyq20l.jpg'); background-size:1200px 675px; background-position:-310px -80px; transform:translate(-100px,80px);}

#ghj4{background:url('https://i.goopics.net/mk3x7h.jpg'); background-size:1200px 675px; background-position:-210px -80px; transform:translate(1300px,80px);}

#ghj5{background:url('https://i.goopics.net/mk3x7h.jpg'); background-size:1200px 675px; background-position:-340px -80px; transform:translate(1300px,80px);}

#ghj6{background:url('https://i.goopics.net/mk3x7h.jpg'); background-size:1200px 675px; background-position:-470px -80px; transform:translate(1300px,80px);}

#gh:focus~#act1{transform:translate(520px,150px);}

#gh:focus~#act2{transform:translate(600px,150px);}  

#gh:focus~#ghj1{transform:translate(130px,80px);}

#gh:focus~#ghj2{transform:translate(260px,80px);}

#gh:focus~#ghj3{transform:translate(390px,80px);}

#gh:focus~#ghj4{transform:translate(730px,80px);}

#gh:focus~#ghj5{transform:translate(860px,80px);}

#gh:focus~#ghj6{transform:translate(990px,80px);}  

#gh:focus{z-index:1;}

#ghj1:hover,#ghj2:hover,#ghj3:hover,#ghj4:hover,#ghj5:hover,#ghj6:hover{z-index:5; width:1200px; height:675px; border-radius:0%; border:none; background-position:0px 0px; transform:translate(0px,0px)!important;}  

--></style>

 

 

 

SUR

VOL