• En rond

    En cherchant à utiliser un code clip-path, qui n'est pas lu par mon navigateur Firefox47, je me suis dit qu'il était plus simple de placer les images, en fond de formes géométriques, en l'occurrence des ronds à survoler !

    7 images en 800x600px dans un montage de cette dimension avec un code simple et répétitif puisque pour chaque image, vous n'avez que son adresse et son positionnement qui change

     

     

     

     

     

     

     


    <div id="aa">
    <p id="a1">&nbsp;</p>
    <p id="a2">&nbsp;</p>
    <p id="a3">&nbsp;</p>
    <p id="a4">&nbsp;</p>
    <p id="a5">&nbsp;</p>
    <p id="a6">&nbsp;</p>
    <p id="a7">&nbsp;</p>
    </div>

    <style><!--
    #aa{width:800px; height:600px; margin:5px auto;}
    #a1{position:absolute; z-index:1; width:300px; height:300px; border-radius:50%; border:3px solid white; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/pqi_nYhbnCO9AdfjTwRKBdUlo8E.jpg); transition:all 1s linear; transform:translate(20px,20px); background-position:center center;}
    #a2{position:absolute; z-index:1; width:300px; height:300px; border-radius:50%; border:3px solid white; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/x44vFu4zL6rKPoet8d0y7YGxgHQ.jpg); transition:all 1s linear; transform:translate(120px,120px); background-position:center center;}
    #a3{position:absolute; z-index:1; width:300px; height:300px; border-radius:50%; border:3px solid white; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/Fw2irH1Gwf5kxGCYTdx__j7Mc4k.jpg); transition:all 1s linear; transform:translate(270px,50px); background-position:center center;}
    #a4{position:absolute; z-index:1; width:300px; height:300px; border-radius:50%; border:3px solid white; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/FgUAQijNo7cBpBqtvRznlyyORzk.jpg); transition:all 1s linear; transform:translate(420px,10px); background-position:center center;}
    #a5{position:absolute; z-index:1; width:300px; height:300px; border-radius:50%; border:3px solid white; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/2F7379odvY073KwySmBLFx8Fio4.jpg); transition:all 1s linear; transform:translate(460px,180px); background-position:center center;}
    #a6{position:absolute; z-index:1; width:300px; height:300px; border-radius:50%; border:3px solid white; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/mCiTHCEXdJVNK-U8TnpFCsYATHU.jpg); transition:all 1s linear; transform:translate(350px,250px); background-position:center center;}
    #a7{position:absolute; z-index:1; width:300px; height:300px; border-radius:50%; border:3px solid white; box-shadow:inset 4px 4px 8px white, inset -4px -4px 8px black; background:url(http://ekladata.com/QxwAe1qCOk8YyuT7Xc_7aJHlXj4.jpg); transition:all 1s linear; transform:translate(160px,260px); background-position:center center;}
    #a1:hover, #a2:hover, #a3:hover, #a4:hover, #a5:hover, #a6:hover, #a7:hover{z-index:10; transform:translate(0px,0px); width:800px; height:600px; border:none; border-radius:0%;}
    --></style>