Selection fond 7 en 60w

Voici une proposition en 60% des dimensions de votre écran: Survolez chaque bouton.

Dans le code, remplacez mes adresses-images par les vôtres en n'oubliant pas que, par exemple, si vous êtes sur Blogspot, il vous faut des adresses Google.

<div style="width: 60vw; height: 70vh; margin: 2vh auto; border: 0.2vw solid white; background: url('http://ekladata.com/AqpaOuQSKMQvleOFTntGnt-iNUs.jpg'); background-size: 60vw 70vh;">
<p id="bout1" class="bout">1</p>
<p id="bout2" class="bout">2</p>
<p id="bout3" class="bout">3</p>
<p id="bout4" class="bout">4</p>
<p id="xw1" class="xw">&nbsp;</p>
<p id="xw2" class="xw">&nbsp;</p>
<p id="xw3" class="xw">&nbsp;</p>
<p id="xw4" class="xw">&nbsp;</p>
<p id="xx1" class="xx">&nbsp;</p>
<p id="xx2" class="xx">&nbsp;</p>
<p id="xx3" class="xx">&nbsp;</p>
<p id="xx4" class="xx">&nbsp;</p>
<p id="xy1" class="xy">&nbsp;</p>
<p id="xy2" class="xy">&nbsp;</p>
<p id="xy3" class="xy">&nbsp;</p>
<p id="xy4" class="xy">&nbsp;</p>
<p id="xz1" class="xz">&nbsp;</p>
<p id="xz2" class="xz">&nbsp;</p>
<p id="xz3" class="xz">&nbsp;</p>
<p id="xz4" class="xz">&nbsp;</p>
</div>

<style><!--
.bout{position:absolute; z-index:10; width:2vw; height:3vw; text-align:center; line-height:3vw; border:0.1vw solid white; box-shadow:inset -0.2vw -0.2vw 0.2vw black, inset 0.2vw 0.2vw 0.3vw white; background:linear-gradient(to top, red 0%, yellow 100%); font-size:2vw; color:white; text-shadow:0.1vw 0.1vw black;}
#bout1{transform:translate(57vw,4vh);}
#bout2{transform:translate(57vw,14vh);}
#bout3{transform:translate(57vw,24vh);}
#bout4{transform:translate(57vw,34vh);}
.xw{position:absolute; z-index:1; background:url('http://ekladata.com/WUprCyQhxZeiCg3p8iyYuE8gsp8.jpg'); background-size:60vw 70vh;}
#xw1{width:60vw; height:17.5vh; transform:translate(0vw,0vh) rotatey(90deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
#xw2{width:60vw; height:17.5vh; transform:translate(0vw,17.5vh) rotatey(90deg); background-position:0vw -17.5vh; transition:all 1s linear 0.1s;}
#xw3{width:60vw; height:17.5vh; transform:translate(0vw,35vh) rotatey(90deg); background-position:0vw -35vh; transition:all 1s linear 0.2s;}
#xw4{width:60vw; height:17.5vh; transform:translate(0vw,52.5vh) rotatey(90deg); background-position:0vw -52.5vh; transition:all 1s linear 0.3s;}
.xx{position:absolute; z-index:1; background:url('http://ekladata.com/msFRunQDCa-QaxDnWNpCX93tdyw.jpg'); background-size:60vw 70vh;}
#xx1{width:60vw; height:17.5vh; transform:translate(0vw,0vh) rotatey(90deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
#xx2{width:60vw; height:17.5vh; transform:translate(0vw,17.5vh) rotatey(90deg); background-position:0vw -17.5vh; transition:all 1s linear 0.1s;}
#xx3{width:60vw; height:17.5vh; transform:translate(0vw,35vh) rotatey(90deg); background-position:0vw -35vh; transition:all 1s linear 0.2s;}
#xx4{width:60vw; height:17.vh; transform:translate(0vw,52.5vh) rotatey(90deg); background-position:0vw -52.5vh; transition:all 1s linear 0.3s;}
.xy{position:absolute; z-index:1; background:url('http://ekladata.com/bL3FlrR73AI8GjkDn7axxrDWLEQ.jpg'); background-size:60vw 70vh;}
#xy1{width:60vw; height:17.vh; transform:translate(0vw,0vh) rotatey(90deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
#xy2{width:60vw; height:17.5vh; transform:translate(0vw,17.5vh) rotatey(90deg); background-position:0vw -17.5vh; transition:all 1s linear 0.1s;}
#xy3{width:60vw; height:17.5vh; transform:translate(0vw,35vh) rotatey(90deg); background-position:0vw -35vh; transition:all 1s linear 0.2s;}
#xy4{width:60vw; height:17.5vh; transform:translate(0vw,52.5vh) rotatey(90deg); background-position:0vw -52.5vh; transition:all 1s linear 0.3s;}
.xz{position:absolute; z-index:1; background:url('http://ekladata.com/BBCB1-Tk-0bYLq_KQ_-aNg2PWaM.jpg'); background-size:60vw 70vh;}
#xz1{width:60vw; height:17.5vh; transform:translate(0vw,0vh) rotatey(90deg); background-position:0vw 0vh; transition:all 1s linear 0s;}
#xz2{width:60vw; height:17.5vh; transform:translate(0vw,17.5vh) rotatey(90deg); background-position:0vw -17.5vh; transition:all 1s linear 0.1s;}
#xz3{width:60vw; height:17.5vh; transform:translate(0vw,35vh) rotatey(90deg); background-position:0vw -35vh; transition:all 1s linear 0.2s;}
#xz4{width:60vw; height:17.5vh; transform:translate(0vw,52.5vh) rotatey(90deg); background-position:0vw -52.5vh; transition:all 1s linear 0.3s;}
.bout:hover{background:linear-gradient(to top, green 0%, yellow 100%);}
#bout1:hover ~ #xw1, #bout2:hover ~ #xx1, #bout3:hover ~ #xy1, #bout4:hover ~ #xz1{z-index:5; width:60vw; height:17.5vh; transform:translate(0vw,0vh) rotatey(0deg);}
#bout1:hover ~ #xw2, #bout2:hover ~ #xx2, #bout3:hover ~ #xy2, #bout4:hover ~ #xz2{z-index:5; width:60vw; height:17.5vh; transform:translate(0vw,17.5vh) rotatey(0deg);}
#bout1:hover ~ #xw3, #bout2:hover ~ #xx3, #bout3:hover ~ #xy3, #bout4:hover ~ #xz3{z-index:5; width:60vw; height:17.5vh; transform:translate(0vw,35vh) rotatey(0deg);}
#bout1:hover ~ #xw4, #bout2:hover ~ #xx4, #bout3:hover ~ #xy4, #bout4:hover ~ #xz4{z-index:5; width:60vw; height:17.5vh; transform:translate(0vw,52.5vh) rotatey(0deg);}
--></style>