• Toujours chaud.

    Code en 60vw par 69vh; remplacez mes adresse-images en bleu par les vôtres.

    L'astuce est de choisir une position du fond identique au positionnement dans le montage:ex:transform:translate(22.5vw,9.2vh); background-position:-22.5vw -9.2vh;}

     

     

     

     

     

     

     

     

    Survolez chaque élément.


    <div style="width: 60vw; height: 69vh; border: 0.6vh ridge white; margin: 2vh auto; background: url('http://ekladata.com/xrD9gicbXy8cjtkBEWeSS976_IY.jpg'); background-size: 60vw 69vh;">
    <p id="mg1" class="mg">&nbsp;</p>
    <p id="mg2" class="mg">&nbsp;</p>
    <p id="mg3" class="mg">&nbsp;</p>
    <p id="mg4" class="mg">&nbsp;</p>
    <p id="mg5" class="mg">&nbsp;</p>
    <p id="mg6" class="mg">&nbsp;</p>
    <p id="mg7" class="mg">&nbsp;</p>
    <p id="mg8" class="mg">&nbsp;</p>
    <p id="mg9">Survolez chaque &eacute;l&eacute;ment.</p>
    </div>

    <style><!--
    .mg{position:absolute; z-index:1; width:15vw; height:10vh; border:0.3vh ridge white; box-sizing:border-box; transition:all 1s linear;}
    #mg1{background:url('http://ekladata.com/h7OJ7Qclee7vxKqEFwsIkXDNHFc.jpg'); background-size:60vw 69vh; transform:translate(22.5vw,9.2vh); background-position:-22.5vw -9.2vh;}
    #mg2{background:url('http://ekladata.com/aL3BGrJpr4t8ASU4Cs25pMJ7kBA.jpg'); background-size:60vw 69vh; transform:translate(15vw,19.4vh); background-position:-15vw -19.4vh;}
    #mg3{background:url('http://ekladata.com/pgnJIfm5rdcrx2-97GqS_5V_WWQ.jpg'); background-size:60vw 69vh; transform:translate(30vw,19.4vh); background-position:-30vw -19.4vh;}
    #mg4{background:url('http://ekladata.com/yJ2EGExg4IonZ7uLgICApoPEj1s.jpg'); background-size:60vw 69vh; transform:translate(7.5vw,29.7vh); background-position:-7.5vw -29.7vh;}
    #mg5{background:url('http://ekladata.com/crSNg3IDVf8yPnkvcbhyeSEEZHw.jpg'); background-size:60vw 69vh; transform:translate(37.5vw,29.7vh); background-position:-37.5vw -29.7vh;}
    #mg6{background:url('http://ekladata.com/6ihJMwYD6HdvosSWutrMTA5oRm0.jpg'); background-size:60vw 69vh; transform:translate(15vw,40vh); background-position:-15vw -40vh;}
    #mg7{background:url('http://ekladata.com/-L730nLcUFcFcA1OoFWaCHrqQfE.jpg'); background-size:60vw 69vh; transform:translate(30vw,40vh); background-position:-30vw -40vh;}
    #mg8{background:url('http://ekladata.com/dH49y0jrMfGMyH9ruuhLdAQEpE0.jpg'); background-size:60vw 69vh; transform:translate(22.5vw,50.3vh); background-position:-22.5vw -50.3vh;}
    #mg9{position:absolute; z-index:1; width:20vw; text-align:center; font-size:3vh; color:white; text-shadow:0.2vh 0.2vh black; transform:translate(0vw,0vh);}
    #mg1:hover,#mg2:hover,#mg3:hover,#mg4:hover,#mg5:hover,#mg6:hover,#mg7:hover,#mg8:hover{z-index:10; width:60vw; height:69vh; transform:translate(0vw,0vh); background-position:0vw 0vh;}
    --></style>