• En pixel, 800x600, survol

    Puisque la demande est ainsi, voici une version pour 8 images en 800x600px plus une pour le fond; animation au survol.

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    Survolez chaque vignette.

    <div style="width: 800px; height: 600px; margin: 20px auto;">
    <p id="bc2" class="ff">&nbsp;</p>
    <p id="bc3" class="ff">&nbsp;</p>
    <p id="bc4" class="ff">&nbsp;</p>
    <p id="bc5" class="ff">&nbsp;</p>
    <p id="bc6" class="ff">&nbsp;</p>
    <p id="bc7" class="ff">&nbsp;</p>
    <p id="bc8" class="ff">&nbsp;</p>
    <p id="bc9" class="ff">&nbsp;</p>
    <p id="c1">&nbsp;</p>
    <p id="c2" class="fd">&nbsp;</p>
    <p id="c3" class="fd">&nbsp;</p>
    <p id="c4" class="fd">&nbsp;</p>
    <p id="c5" class="fd">&nbsp;</p>
    <p id="c6" class="fd">&nbsp;</p>
    <p id="c7" class="fd">&nbsp;</p>
    <p id="c8" class="fd">&nbsp;</p>
    <p id="c9" class="fd">&nbsp;</p>
    <p id="tt">Survolez chaque vignette.</p>
    </div>
    <hr style="border: 3px solid grey;" />
    <p style="text-align: center;"><strong>***</strong></p>
    <style><!--
    #tt{position:absolute; z-index:1; width:400px; margin:5px 0px 0px 200px; text-align:center; font-size:20pt; color:white; text-shadow:1px 1px green;}
    .ff{position:absolute; z-index:10; width:80px; height:60px;}
    .fd{position:absolute; z-index:1; width:80px; height:60px;transition:all 1s linear 0s; box-shadow:4px 4px 6px black; transform:rotatey(-180deg); transform-origin:center center; border:3px solid white; border-radius:50%;}
    #c1{position:absolute; z-index:1; width:800px; height:600px; margin:0px 0px; border:3px solid white; border-radius:20%; background:url('http://ekladata.com/BbilwKOZvmlEVX7OLGfiwILVgc0.jpg'); background-size:cover; box-shadow:3px 3px 6px black;}

    #bc2{ margin:50px 0 0 50px;}
    #c2{margin:50px 0 0 50px; background:url('http://ekladata.com/WGnnUe1bA6-8WUlXzare-LNDncE.jpg'); background-size:cover;}

    #bc3{margin:150px 0 0 50px;}
    #c3{margin:150px 0 0 50px;background:url('http://ekladata.com/zTFm_W8r2xtJClpojBGsK5L7Cxg.jpg'); background-size:cover;}

    #bc4{margin:250px 0 0 50px;}
    #c4{margin:250px 0 0 50px; background:url('http://ekladata.com/uOldar7lmLLzY-mTcyM2MkyPf-w.jpg'); background-size:cover;}

    #bc5{margin:350px 0 0 50px;}
    #c5{margin:350px 0 0 50px;background:url('http://ekladata.com/KdwvJxlocf8_rvIqeFx9_ReZc24.jpg'); background-size:cover;}

    #bc6{margin:50px 0 0 670px;}
    #c6{margin:50px 0 0 670px; background:url('http://ekladata.com/z5OOQP98KwYfdaOC2XZ6wATT5Fo.jpg'); background-size:cover;}

    #bc7{margin:150px 0 0 670px;}
    #c7{margin:150px 0 0 670px; background:url('http://ekladata.com/wzwxQ94mvmyIFwfD9LHVE_cLOcY.jpg'); background-size:cover;}

    #bc8{margin:250px 0 0 670px;}
    #c8{margin:250px 0 0 670px; background:url('http://ekladata.com/_QwQQ5Se8qr-buz-xSOCHVt6-HM.jpg'); background-size:cover;}

    #bc9{margin:350px 0 0 670px;}
    #c9{margin:350px 0 0 670px; background:url('http://ekladata.com/JIdsDQ53l1m7Dtw2t69fprcUjlo.jpg'); background-size:cover;}

    #bc2:hover ~ #c2, #bc3:hover ~ #c3, #bc4:hover ~ #c4,#bc5:hover ~ #c5, #bc6:hover ~ #c6, #bc7:hover ~ #c7, #bc8:hover ~ #c8,#bc9:hover ~ #c9{z-index:5; width:800px; height:600px; margin:0% 0% 0% 0%; transform: rotatey(0deg); border-radius:20%; border:3px solid white;}
    --></style>