• Dé face quatre

    4 images en 800x600px; la partie sélectionnée de votre image est ajustable par background-position;

    survolez les images.

     

     

     

     

    <div style="width: 800px; height: 600px; position: relative; margin: 10px auto;">
    <p id="m1" class="rd">&nbsp;</p>
    <p id="m2" class="rd">&nbsp;</p>
    <p id="m3" class="rd">&nbsp;</p>
    <p id="m4" class="rd">&nbsp;</p>
    </div>

    <style><!--
    .rd{position: absolute; z-index:1; transition:all 1.5s ease-out; width:200px; height:200px; border-radius:50%; border:3px solid white; box-shadow:4px 4px 8px black;}
    #m1{ transform:translate(50px,20px); background:url(http://ekladata.com/jOreaIQrXqZRxAD6z13lt0LlU8s/1142.jpg); background-position: 55% 25%; background-size:600% 600%; }
    #m2{ transform:translate(400px,20px); background:url(http://ekladata.com/9rkVkU02t_q6tw-hsVA98MA0MvQ/1146.jpg); background-position: 50% 50%; background-size:600% 600%; }
    #m3{ transform:translate(50px,350px); background:url(http://ekladata.com/F9jd1JTvFoqirsP2wnUjmdLBEPY/1176.jpg); background-position: 50% 50%; background-size:600% 600%; }
    #m4{ transform:translate(400px,350px); background:url(http://ekladata.com/_fEk13T6xrAILco8vcrhf4yRGiw/1185.jpg); background-position: 60% 30%; background-size:600% 600%; }


    #m1:hover{ z-index:10; transform:translate(0px,0px); width:800px; height:600px; border-radius:0%; background-size:100% 100%;}
    #m2:hover{ z-index:10; transform:translate(0px,0px); width:800px; height:600px; border-radius:0%; background-size:100% 100%;}
    #m3:hover{ z-index:10; transform:translate(0px,0px); width:800px; height:600px; border-radius:0%; background-size:100% 100%;}
    #m4:hover{ z-index:10; transform:translate(0px,0px); width:800px; height:600px; border-radius:0%; background-size:100% 100%;}
    --></style>