Exemple 83

Survol

<div style="width: 1000px; height: 563px; margin: 1vh auto;">
<p id="tri1" class="tri">&nbsp;</p>
<p id="tri2" class="tri">&nbsp;</p>
<p id="tri3" class="tri">&nbsp;</p>
<p id="tri4" class="tri">&nbsp;</p>
<p id="tri5" class="tria">&nbsp;</p>
<p id="tri6" class="tria">&nbsp;</p>
<p id="tri7" class="tria">&nbsp;</p>
<p id="tri8" class="tria">&nbsp;</p>
<p id="rond1" class="rd">&nbsp;</p>
<p id="rond2" class="rd">&nbsp;</p>
<p id="rond3" class="rd">&nbsp;</p>
<p id="rond4" class="rd">&nbsp;</p>
<p id="rond5" class="rd">&nbsp;</p>
<p id="rond6" class="rd">&nbsp;</p>
<p id="rond7" class="rd">&nbsp;</p>
<p id="rond8" class="rd">&nbsp;</p>
</div>

<style><!--
.tri{position:absolute; z-index:1; width:250px; height:250px; border:0.8vh ridge grey;}
#tri1{box-sizing:border-box; background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(0px,20px);}
#tri2{box-sizing:border-box;background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(250px,20px);}
#tri3{box-sizing:border-box;background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(500px,20px);}
#tri4{box-sizing:border-box;background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(750px,20px);}
.tria{position:absolute; z-index:1; width:250px; height:250px; border:0.8vh ridge grey;}
#tri5{box-sizing:border-box;background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(0px,290px);}
#tri6{box-sizing:border-box;background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(250px,290px);}
#tri7{box-sizing:border-box;background:url('http://ekladata.com/eCUvqlv-QrGYeRFAu9TcrGhHv6k/marble1.jpg'); transform:translate(500px,290px);}
#tri8{box-sizing:border-box;background:url('http://ekladata.com/6M5dyVS_9JYhP5a4_YUbB00LEQM/marble2.jpg'); transform:translate(750px,290px);}
.rd{ position:absolute; z-index:2; width:200px; height:200px; border-radius:50%; box-shadow:inset -3px -3px 6px white, inset 3px 3px 6px black; transition:all 1s linear;}
#rond1{background:url('http://ekladata.com/YIbd7Yh-0LE3XSvuPXQ0K7JTG24@1000x563.jpg'); background-position:-25px -45px; transform:translate(25px,45px);}
#rond2{background:url('http://ekladata.com/rCFbVw4hP3mSUXZRFxY-Tl2V80c@1000x563.jpg'); background-position:-275px -45px; transform:translate(275px,45px);}
#rond3{background:url('http://ekladata.com/4FPWtMQnW4u2FAwHrq5D4K4zTsc@1000x563.jpg'); background-position:-525px -45px; transform:translate(525px,45px);}
#rond4{background:url('http://ekladata.com/qCz52l2M5YB9KEuk-7CKg8gcWA8@1000x563.jpg'); background-position:-775px -45px; transform:translate(775px,45px);}
#rond5{background:url('http://ekladata.com/kLZKy89ujg3uVimzOc_aIOSCick@1000x563.jpg'); background-position:-25px -325px; transform:translate(25px,325px);}
#rond6{background:url('http://ekladata.com/H0Z5m6vlAoQGs12iURSm1MmWBoE@1000x563.jpg'); background-position:-275px -325px; transform:translate(275px,325px);}
#rond7{background:url('http://ekladata.com/mwZwz8Ggsg3NXnypZ1WLqlh42Is@1000x563.jpg'); background-position:-525px -325px; ;transform:translate(525px,325px);}
#rond8{background:url('http://ekladata.com/s-gFz6HqGJHS1ztZ_UTJaGJ1H8Y@1000x563.jpg'); background-position:-775px -325px; transform:translate(775px,325px);}
#rond1:hover,#rond2:hover, #rond3:hover,#rond4:hover,#rond5:hover,#rond6:hover, #rond7:hover,#rond8:hover{z-index:5; width:1000px; height:563px; border-radius:0%; background-position:0px 0px; transform:translate(0px,0px);}
--></style>