Exemple 67

 1+8 images au ratio 16/9, redimensionnées par le code en 1152x648px. Clic sur menu puis clic sur les choix.

L'animation, ici par opacité, peut être modifiée de plusieurs façons.

<div style="width: 60vw; height: 33.75vw; margin: 1vh auto; border: 0.1vh solid black; text-align: left; background: url('http://ekladata.com/s9fbd8lXf1OpXe5QuNe2Y-TLwoo@1152x648'); background-size:cover;"><input id="sec0" class="sec" type="text" value="menu" /> <input id="sec1" class="sec" type="text" value="un" /> <input id="sec2" class="sec" type="text" value="deux" /> <input id="sec3" class="sec" type="text" value="trois" /> <input id="sec4" class="sec" type="text" value="quatre" /> <input id="sec5" class="sec" type="text" value="cinq" /> <input id="sec6" class="sec" type="text" value="six" /> <input id="sec7" class="sec" type="text" value="sept" /> <input id="sec8" class="sec" type="text" value="huit" />
<img id="hj1" class="hj" src="http://ekladata.com/mHIGp-2MEZIYbS_tX9MqbGRgVWE@1152x648.jpg" alt="" />
<img id="hj2" class="hj" src="http://ekladata.com/j38DtPQ45YZ3qaUkA8-XSQFWMX0@1152x648.jpg" alt="" />
<img id="hj3" class="hj" src="http://ekladata.com/YsrtIQs88tNMsyxn-Xlkl3j--Ug@1152x648.jpg" alt="" />
<img id="hj4" class="hj" src="http://ekladata.com/B72qU45L7pKNYrfy75SrY9FkluY@1152x648.jpg" alt="" />
<img id="hj5" class="hj" src="http://ekladata.com/lT-9-33aG3-gkoHHHh-c08jG39g@1152x648.jpg" alt="" />
<img id="hj6" class="hj" src="http://ekladata.com/UCRVeWS8gzLyM3C7xv021C2gu1k@1152x648.jpg" alt="" />
<img id="hj7" class="hj" src="http://ekladata.com/rtyrIXUw9IfJJUt7zyeX2V07lSQ@1152x648.jpg" alt="" />
<img id="hj8" class="hj" src="http://ekladata.com/mnRVnthI9KKIgcIxclyxfNjBzMQ@1152x648.jpg" alt="" />
</div>
<style><!--
.sec{ position:absolute;width:5vw; height:2vw; text-align:center; transform:translate(55vw,0vw); font-size:1.5vw; line-height:2vw; color:white!important; text-shadow:0.1vh 0.1vh black; background:rgba(0,0,0,0.4); border:none;}
#sec0{ z-index:5;}
#sec1{position:absolute; z-index:4; opacity:0; transition:all 0.1s linear;}
#sec2{position:absolute; z-index:4; opacity:0; transition:all 0.2s linear;}
#sec3{position:absolute; z-index:4; opacity:0; transition:all 0.3s linear;}
#sec4{position:absolute; z-index:4; opacity:0; transition:all 0.4s linear;}
#sec5{position:absolute; z-index:4; opacity:0; transition:all 0.5s linear;}
#sec6{position:absolute; z-index:4; opacity:0; transition:all 0.6s linear;}
#sec7{position:absolute; z-index:4; opacity:0; transition:all 0.7s linear;}
#sec8{position:absolute; z-index:4; opacity:0; transition:all 0.8s linear;}

#sec0:focus ~ #sec1{opacity:1; transform:translate(55vw,2vw);}
#sec0:focus ~ #sec2{opacity:1; transform:translate(55vw,4vw);}
#sec0:focus ~ #sec3{opacity:1; transform:translate(55vw,6vw);}
#sec0:focus ~ #sec4{opacity:1; transform:translate(55vw,8vw);}
#sec0:focus ~ #sec5{opacity:1; transform:translate(55vw,10vw);}
#sec0:focus ~ #sec6{opacity:1; transform:translate(55vw,12vw);}
#sec0:focus ~ #sec7{opacity:1; transform:translate(55vw,14vw);}
#sec0:focus ~ #sec8{opacity:1; transform:translate(55vw,16vw);}
.hj{position:absolute;z-index:2; width:60vw; height:33.75vw; transform:translate(0vw,0vw); opacity:0; transition:all 0.5s linear;}
#sec1:focus ~ #hj1,#sec2:focus ~ #hj2,#sec3:focus ~ #hj3,#sec4:focus ~ #hj4,#sec5:focus ~ #hj5,#sec6:focus ~ #hj6,#sec7:focus ~ #hj7,#sec8:focus ~ #hj8{opacity:1;}
--></style>