Survol vertical

Pour clore la série, voici un survol pour images en vertical.

Le survol d'un bouton change l'image de fond.

<div style="width: 25vw; height: 45vw; margin: 0 1vw 0 5vw; margin:2vh auto; border: 0.5vh ridge brown; background: url('http://ekladata.com/S7HdI7YG6m2bUyjxJ_GBsccqq2k/fondo.jpg');">
<p id="by1" class="by">&nbsp;</p>
<p id="by2" class="by">&nbsp;</p>
<p id="by3" class="by">&nbsp;</p>
<p id="by4" class="by">&nbsp;</p>
<p id="by5" class="by">&nbsp;</p>
<p id="ayg0">Survolez chaque bouton vert.</p>
<p id="ayg1" class="ay">&nbsp;</p>
<p id="ayg2" class="ay">&nbsp;</p>
<p id="ayg3" class="ay">&nbsp;</p>
<p id="ayg4" class="ay">&nbsp;</p>
<p id="ayg5" class="ay">&nbsp;</p>
<p id="ayg6" class="ay">&nbsp;</p>
</div>

<style><!--
.by{position:absolute; z-index:10; width:2vw; height:2vw; border-radius:50%;background:lime; border:0.2vh solid grey; box-shadow:inset 0.3vh 0.3vh 0.5vh black,inset -0.3vh -0.3vh 0.5vh white; }
#by1{transform:translate(22vw,2vw);}
#by2{transform:translate(22vw,5vw);}
#by3{transform:translate(22vw,8vw);}
#by4{transform:translate(22vw,11vw);}
#by5{transform:translate(22vw,14vw);}
#ayg0{position:absolute; z-index:1; width:25vw; text-align:center; font-size:1.2vw; transform:translate(0vw,2vw);}
.ay{position:absolute; z-index:5; box-sizing:border-box; width:5vw; height:5vw; border-radius:50%;border:0.2vh solid white; box-shadow:inset 0.2vw 0.2vw 0.5vw white, inset -0.2vw -0.2vw 0.5vw black, 0.3vh 0.3vh 0.5vh black; background:url('http://ekladata.com/a6LK0Ei5JaTbmYuGyeN3b3LguTo.jpg'); background-size:25vw 45vw;}
#ayg1{transform:translate(5vw,5vw); background-position:0vw 0vw;}
#ayg2{transform:translate(15vw,10vw); background-position:-10vw 0vw;}
#ayg3{transform:translate(5vw,15vw); background-position:0vw -25vw;}
#ayg4{transform:translate(15vw,20vw); background-position:-10vw -10vw;}
#ayg5{transform:translate(5vw,25vw); background-position:0vw -35vw;}
#ayg6{transform:translate(15vw,30vw); background-position:-15vw -35vw;}
#by2:hover~.ay{background:url('http://ekladata.com/fOFbiR2NMmLCCd_o8YjKgHrVz2w.jpg'); background-size:25vw 45vw;}
#by3:hover~.ay{background:url('http://ekladata.com/Tfr3A76ULGQTr5iSNH24RtgZMmg.jpg'); background-size:25vw 45vw;}
#by4:hover~.ay{background:url('http://ekladata.com/xZmo72eTnEwJjJWEgR6pIPL91VM.jpg'); background-size:25vw 45vw;}
#by5:hover~.ay{background:url('http://ekladata.com/yT7JAQKJ5DilXznwXeWb4ft-M2U.jpg'); background-size:25vw 45vw;}
#by1:hover~#ayg1,#by2:hover~#ayg1,#by3:hover~#ayg1,#by4:hover~#ayg1,#by5:hover~#ayg1{width:10vw; height:25vw; background-position:0vw 0vw; border:none; border-radius:0%; box-shadow:none; transform:translate(0vw,0vw); transition:all 1s linear 0.5s;}
#by1:hover~#ayg2,#by2:hover~#ayg2,#by3:hover~#ayg2,#by4:hover~#ayg2,#by5:hover~#ayg2{width:15vw; height:10vw; background-position:-10vw 0vw; border:none; border-radius:0%; box-shadow:none; transform:translate(10vw,0vw); transition:all 1s linear 0.6s;}
#by1:hover~#ayg3,#by2:hover~#ayg3,#by3:hover~#ayg3,#by4:hover~#ayg3,#by5:hover~#ayg3{width:10vw; height:10vw; background-position:0vw -25vw; border:none; border-radius:0%; box-shadow:none; transform:translate(0vw,25vw); transition:all 1s linear 0.7s;}
#by1:hover~#ayg4,#by2:hover~#ayg4,#by3:hover~#ayg4,#by4:hover~#ayg4,#by5:hover~#ayg4{width:15vw; height:25vw; background-position:-10vw -10vw; border:none; border-radius:0%; box-shadow:none; transform:translate(10vw,10vw); transition:all 1s linear 0.8s;}
#by1:hover~#ayg5,#by2:hover~#ayg5,#by3:hover~#ayg5,#by4:hover~#ayg5,#by5:hover~#ayg5{width:15vw; height:10vw; background-position:0vw -35vw; border:none; border-radius:0%; box-shadow:none; transform:translate(0vw,35vw); transition:all 1s linear 0.9s;}
#by1:hover~#ayg6,#by2:hover~#ayg6,#by3:hover~#ayg6,#by4:hover~#ayg6,#by5:hover~#ayg6{width:10vw; height:10vw; background-position:-15vw -35vw; border:none; border-radius:0%; box-shadow:none; transform:translate(15vw,35vw); transition:all 1s linear 1s;}
--></style>