lavande 1

Ce genre de montage est simple à réaliser et peut être adapté à tout format; ici, largeur:80vw et hauteur:97vh peuvent être modifiées aux valeurs de votre choix.

<div style="width: 80vw; height: 97vh; border: 0.3vh ridge white; background: rgba(0,0,0,0.5); margin: 2vh auto; overflow: hidden;"><input id="lav0" class="lav" type="text" /><input id="lav1" class="lav" type="text" /><input id="lav2" class="lav" type="text" /><input id="lav3" class="lav" type="text" /><input id="lav4" class="lav" type="text" /><input id="lav5" class="lav" type="text" />
<p id="fleur"><img style="width: 80vw;" src="https://ekladata.com/F63zdCqRX0YvIUXtd7eXNAIXmlo.jpg" alt="" /><img style="width: 80vw;" src="https://ekladata.com/m_iK9AVC4UXvU7SG7UWc1S_EZMA.jpg" alt="" /><img style="width: 80vw;" src="https://ekladata.com/TL_rlnODSxhNEy3YHdBlbRuRVFI.jpg" alt="" /><img style="width: 80vw;" src="https://ekladata.com/RpXhNiwxvh3bASbYB6VNKJu9yMM.jpg" alt="" /><img style="width: 80vw;" src="https://ekladata.com/O2KSmDTbDcZWdrbJ4IQA7pDeSLk.jpg" alt="" /><img style="width: 80vw;" src="https://ekladata.com/oIFwBP6fMb_3vdwFW_RSjzxyCEg.jpg" alt="" /></p>
</div>
<style><!--
.lav{position:absolute; width:1.5vw; height:1.5vw; border-radius:50%; background:white;}
#lav0{transform:translate(5vw,92.5vh);}
#lav1{transform:translate(10vw,92.5vh);}
#lav2{transform:translate(15vw,92.5vh);}
#lav3{transform:translate(20vw,92.5vh);}
#lav4{transform:translate(25vw,92.5vh);}
#lav5{transform:translate(30vw,92.5vh);}
#fleur{display:inline; width:490vw; height:92vh; transform:translate(0vw,0vh); transition:all 1s linear;}
.lav:focus{background:lime;}
#lav1:focus ~ #fleur{transform:translate(-80vw,0vh);}
#lav2:focus ~ #fleur{transform:translate(-160vw,0vh);}
#lav3:focus ~ #fleur{transform:translate(-240vw,0vh);}
#lav4:focus ~ #fleur{transform:translate(-320vw,0vh);}
#lav5:focus ~ #fleur{transform:translate(-400vw,0vh);}
--></style>

Les positionnements et translations seront modifiées à vos valeurs, en valeurs adaptatives (vw/vh) ou en valeurs fixes (px)