Survol

Exceptionnellement, ratio images en 4/3; si vos images sont au ratio 19/9, modifiez toutes les valeurs en 45vw par 33.75vw.

Remplacez mes adresses/images par les vôtres.

Changement d'image au clic sur chaque bouton de gauche et développement par le survol du bouton de droite.

<div style="width: 60vw; height: 45vw; margin: 2vh auto; border: 0.4vh ridge white; background: radial-gradient(ellipse at center, #f0b7a1 0%,#8c3310 50%,#752201 51%,#bf6e4e 100%);"><input id="c1" class="c" type="text" value="1" /><input id="c2a" class="c" type="text" value="2" /><input id="c3" class="c" type="text" value="3" /><input id="c4" class="c" type="text" value="4" /><input id="c5" class="c" type="text" value="5" /><input id="c6" class="c" type="text" value="6" /><input id="c7" class="c" type="text" value="7" />
<p id="aa0">Clic</p>
<p id="bb0">Survol</p>
<p id="bb1">A</p>
<p id="p1">&nbsp;</p>
<p id="p2">&nbsp;</p>
<p id="p3">&nbsp;</p>
</div>

<style><!--
.c{position:absolute; z-index:10; width:2vw; height:2vw; font-size:2vw; background:transparent; text-align:center; color:white!important; text-shadow:0.1vh 0.1vh black;}
#c1{transform:translate(0vw,5vw);}
#c2a{transform:translate(0vw,8vw);}
#c3{transform:translate(0vw,11vw);}
#c4{transform:translate(0vw,14vw);}
#c5{transform:translate(0vw,17vw);}
#c6{transform:translate(0vw,20vw);}
#c7{transform:translate(0vw,23vw);}
#c2{transform:translate(0vw,10vw);}
#aa0{position:absolute; z-index:1; width:6vw; font-size:2vw; color:white!important; transform:translate(0vw,0vw); text-shadow:0.1vh 0.1vh black;}
#bb0{position:absolute; z-index:1; width:7vw; font-size:2vw; color:white!important; transform:translate(53vw,0vw); text-shadow:0.1vh 0.1vh black;}
#bb1{position:absolute; z-index:10; width:2vw; height:2vw; border:0.1vh solid black; border-radius:50%; font-size:2vw; color:white!important; background:rgba(0,0,0,0.3); text-align:center; line-height:2vw; transform:translate(57vw,5vw); box-shadow:inset 0.1vh 0.1vh 0.3vh black, inset -0.1vh -0.1vh 0.3vh white;}
#p1{position:absolute; z-index:2; width:0vw; height:15vw; background:url('http://ekladata.com/7EIWqeTqSeCBcf-ZOp6_T4Zt0HI.jpg'); background-size:60vw 45vw; background-position:0vw 0vw; transform:translate(0vw,0vw); transition:all 1s linear 0s;}
#p2{position:absolute; z-index:2; width:0vw; height:15vw; background:url('http://ekladata.com/7EIWqeTqSeCBcf-ZOp6_T4Zt0HI.jpg'); background-size:60vw 45vw; background-position:0vw -15vw; transform-origin:top left; transform:translate(0vw,15vw); transition:all 1s linear 1s;}
#p3{position:absolute; z-index:2; width:0vw; height:15vw; background:url('http://ekladata.com/7EIWqeTqSeCBcf-ZOp6_T4Zt0HI.jpg'); background-size:60vw 45vw; background-position:0vw -30vw;transform-origin:top center; transform:translate(0vw,30vw); transition:all 1s linear 2s;}
.c:focus{color:lime!important;}
#c1:focus ~ #p1{background:url('http://ekladata.com/7EIWqeTqSeCBcf-ZOp6_T4Zt0HI.jpg');background-size:60vw 45vw; background-position:0vw 0vw;}
#c1:focus ~ #p2{background:url('http://ekladata.com/7EIWqeTqSeCBcf-ZOp6_T4Zt0HI.jpg');background-size:60vw 45vw; background-position:0vw -15vw;}
#c1:focus ~ #p3{background:url('http://ekladata.com/7EIWqeTqSeCBcf-ZOp6_T4Zt0HI.jpg');background-size:60vw 45vw; background-position:0vw -30vw;}
#c2a:focus ~ #p1{background:url('http://ekladata.com/5NuaVN6FQaBqm_m9Ud2h69F5KJo.jpg');background-size:60vw 45vw; background-position:0vw 0vw;}
#c2a:focus ~ #p2{background:url('http://ekladata.com/5NuaVN6FQaBqm_m9Ud2h69F5KJo.jpg');background-size:60vw 45vw; background-position:0vw -15vw;}
#c2a:focus ~ #p3{background:url('http://ekladata.com/5NuaVN6FQaBqm_m9Ud2h69F5KJo.jpg');background-size:60vw 45vw; background-position:0vw -30vw;}
#c3:focus ~ #p1{background:url('http://ekladata.com/e9C-7cSI2mhW7vQn41hgCgJsdHw.jpg');background-size:60vw 45vw; background-position:0vw 0vw;}
#c3:focus ~ #p2{background:url('http://ekladata.com/e9C-7cSI2mhW7vQn41hgCgJsdHw.jpg');background-size:60vw 45vw; background-position:0vw -15vw;}
#c3:focus ~ #p3{background:url('http://ekladata.com/e9C-7cSI2mhW7vQn41hgCgJsdHw.jpg');background-size:60vw 45vw; background-position:0vw -30vw;}
#c4:focus ~ #p1{background:url('http://ekladata.com/MYJIVep5f6Grkb0dG3BwpSdK7uc.jpg');background-size:60vw 45vw; background-position:0vw 0vw;}
#c4:focus ~ #p2{background:url('http://ekladata.com/MYJIVep5f6Grkb0dG3BwpSdK7uc.jpg');background-size:60vw 45vw; background-position:0vw -15vw;}
#c4:focus ~ #p3{background:url('http://ekladata.com/MYJIVep5f6Grkb0dG3BwpSdK7uc.jpg');background-size:60vw 45vw; background-position:0vw -30vw;}
#c5:focus ~ #p1{background:url('http://ekladata.com/G5HVb8IQjweJwHus6dgTF-qlsdE.jpg');background-size:60vw 45vw; background-position:0vw 0vw;}
#c5:focus ~ #p2{background:url('http://ekladata.com/G5HVb8IQjweJwHus6dgTF-qlsdE.jpg');background-size:60vw 45vw; background-position:0vw -15vw;}
#c5:focus ~ #p3{background:url('http://ekladata.com/G5HVb8IQjweJwHus6dgTF-qlsdE.jpg');background-size:60vw 45vw; background-position:0vw -30vw;}
#c6:focus ~ #p1{background:url('http://ekladata.com/fm98t6CZrmxGnbb1yvX2H0Hib3k.jpg');background-size:60vw 45vw; background-position:0vw 0vw;}
#c6:focus ~ #p2{background:url('http://ekladata.com/fm98t6CZrmxGnbb1yvX2H0Hib3k.jpg');background-size:60vw 45vw; background-position:0vw -15vw;}
#c6:focus ~ #p3{background:url('http://ekladata.com/fm98t6CZrmxGnbb1yvX2H0Hib3k.jpg');background-size:60vw 45vw; background-position:0vw -30vw;}
#c7:focus ~ #p1{background:url('http://ekladata.com/3J4zsBnk2pwFkeEqJY63nHcCOLI.jpg');background-size:60vw 45vw; background-position:0vw 0vw;}
#c7:focus ~ #p2{background:url('http://ekladata.com/3J4zsBnk2pwFkeEqJY63nHcCOLI.jpg');background-size:60vw 45vw; background-position:0vw -15vw;}
#c7:focus ~ #p3{background:url('http://ekladata.com/3J4zsBnk2pwFkeEqJY63nHcCOLI.jpg');background-size:60vw 45vw; background-position:0vw -30vw;}
#bb1:hover ~ #p1{width:60vw;}
#bb1:hover ~ #p2{width:60vw; transform:translate(0vw,15vw);}
#bb1:hover ~ #p3{width:60vw; transform:translate(0vw,30vw);}
--></style>