Art.06c.9.21

Le même en vertical.

<div style="position: relative; overflow: hidden; width: 1000px; height: 562px; border: 3px ridge grey; text-align: left; margin: 20px auto; background: url('http://ekladata.com/GohmX9VaDbwtmZWmhc2OOU-RoFU@1000x562.jpg'); background-size: cover;"><input id="ch1" class="ch" type="button" /> <input id="ch2" class="ch" type="button" /> <input id="ch4" class="ch" type="button" /> <input id="ch5" class="ch" type="button" />
<img id="ver1" class="ver" src="http://ekladata.com/NnN4J77WiCtexOXUx0-sPEhsfc0@1000x562.jpg" alt="" />
<img id="ver2" class="ver" src="http://ekladata.com/dxm2b0sUfB0ZbHjeqiBN1tZch5s@1000x562.jpg" alt="" />
<img id="ver4" class="ver" src="http://ekladata.com/LmC6fY8yW_MPnsE2EK8gPWKoqwo@1000x562.jpg" alt="" />
<img id="ver5" class="ver" src="http://ekladata.com/cTSfe8X3nFRmKVFkZcKlVWLqTns@1000x562.jpg" alt="" />
</div>
<style><!--
.ch{position:absolute; z-index:5; background:coral!important; width:20px; height:20px; border-radius:50%;}
#ch1{transform:translate(970px,50px);}
#ch2{transform:translate(970px,100px);}
#ch4{transform:translate(970px,300px);}
#ch5{transform:translate(970px,350px);}
.ver{position:absolute; z-index:1; width:1000px; height:562px; transition:all 1s;}
#ver1, #ver2{transform:translate(0px,-570px);}
#ver4, #ver5{transform:translate(0px,570px);}
#ch1:focus ~ #ver1,#ch2:focus ~ #ver2,#ch4:focus ~ #ver4,#ch5:focus ~ #ver5{z-index:3; transform:translate(0px,0px);}
.ch:focus{background:lime!important;}
--></style>