arc en ciel 2

Une variation sur le même thème; survolez chaque bouton coloré.

<div style="margin: 0% 0% 45% 10%;">
<p id="a0">&nbsp;</p>
<p id="a1" class="aa">&nbsp;</p>
<p id="a2" class="aa">&nbsp;</p>
<p id="a3" class="aa">&nbsp;</p>
<p id="a4" class="aa">&nbsp;</p>
<p id="a5" class="aa">&nbsp;</p>
<p id="a6" class="aa">&nbsp;</p>
<p id="a7" class="aa">&nbsp;</p>
<p id="b0">&nbsp;</p>
<p id="b1">&nbsp;</p>
<p id="b2">&nbsp;</p>
<p id="b3">&nbsp;</p>
<p id="b4">&nbsp;</p>
<p id="b5">&nbsp;</p>
<p id="b6">&nbsp;</p>
<p id="b7">&nbsp;</p>
</div>
<hr style="border: 3px double grey;" />
<p>...</p>
<style><!--
#a0{position:absolute; z-index:9; width:1.5vw; height:42vh; margin:2vh 78.5vw; background:url('http://ekladata.com/e2-Mu_-__wZhEq7li9-NJCkCAcM/arc1v.jpg'); background-size:cover;}
.aa{position:absolute; z-index:10; width:1.4vw; height:6vh;border:0.1vw solid black;}
#a1{margin:2vh 78.5vw;}
#a2{margin:8vh 78.5vw;}
#a3{margin:14vh 78.5vw;}
#a4{margin:20vh 78.5vw;}
#a5{margin:26vh 78.5vw;}
#a6{margin:32vh 78.5vw;}
#a7{margin:38vh 78.5vw;}

#b0{position:absolute; z-index:1; margin:0vw 0vh; background:url('http://ekladata.com/-kmEl3es7V4W1puL3EgWtwizonM.jpg'); background-size:cover; width:80vw; height:80vh; border:0.4vw ridge grey;}
#b1{position:absolute; z-index:2; margin:40vh 40vw; background:url('http://ekladata.com/BJ3_DSdAXaq813SMsZU70a7GxFc.jpg'); background-size:cover; width:0vw; height:0vh; transition:all 0.5s linear;}
#b2{position:absolute; z-index:3; margin:40vh 40vw; background:url('http://ekladata.com/UNvShxmXGv56KB3x43wRKUMYXa4.jpg'); background-size:cover; width:0vw; height:0vh;transition:all 0.5s linear;}
#b3{position:absolute; z-index:2; margin:40vh 40vw; background:url('http://ekladata.com/J2YWYKEOByt6BLePrhzqRniWP6k.jpg'); background-size:cover; width:0vw; height:0vh;transition:all 0.5s linear;}
#b4{position:absolute; z-index:3; margin:40vh 40vw; background:url('http://ekladata.com/qk2Cyx9urEmO1dWbvBohMEukUCQ.jpg'); background-size:cover; width:0vw; height:0vh;transition:all 0.5s linear;}
#b5{position:absolute; z-index:2; margin:40vh 40vw; background:url('http://ekladata.com/VgOAZhQc-Q81unpYr6TZUjAmuGE.jpg'); background-size:cover; width:0vw; height:0vh;transition:all 0.5s linear;}
#b6{position:absolute; z-index:3; margin:40vh 40vw; background:url('http://ekladata.com/Y3GATLVUZFHqJlFFj-IqjCv_noM.jpg'); background-size:cover; width:0vw; height:0vh;transition:all 0.5s linear;}
#b7{position:absolute; z-index:2; margin:40vh 40vw; background:url('http://ekladata.com/UzbU85s3Y_QpgLii-LfrPlmJpdk.jpg'); background-size:cover; width:0vw; height:0vh;transition:all 0.5s linear;}

#a1:hover ~ #b1,#a2:hover ~ #b2,#a3:hover ~ #b3,#a4:hover ~ #b4,#a5:hover ~ #b5,#a6:hover ~ #b6,#a7:hover ~ #b7{width:80vw; height:80vh;margin:0.8vh 0.4vw;}
--></style>