• Exemple 217a

    Le même avec arrondi 50%.

     

     

     

     

     

    <div style="width: 1000px; height: 563px; margin: 5px auto;">
    <p id="bord1a" class="borda">&nbsp;</p>
    <p id="bord2a" class="borda">&nbsp;</p>
    <p id="bord3a" class="borda">&nbsp;</p>
    <p id="bord4a" class="borda">&nbsp;</p>
    <p id="bord5a" class="borda">&nbsp;</p>
    </div>

    <style><!--
    .borda{position:absolute; z-index:1; width:500px; height:250px; border:4px ridge white; border-radius:50%; transition:all 1s linear;}
    #bord1a{box-sizing:border-box; background:url('http://ekladata.com/ptUqFlWKP95ahqu_EwNi8B0FfWI@1000x563.jpg'); background-size:cover; transform:translate(0px,0px);}
    #bord2a{box-sizing:border-box; background:url('http://ekladata.com/-uAEu35cQBraOtpT7vApeQT9M8w@1000x563.jpg'); background-size:cover; transform:translate(500px,0px);}
    #bord3a{box-sizing:border-box;height:250px; background:url('http://ekladata.com/d62qZJngD62SfpTZe3XAR9F5YH4@1000x563.jpg'); background-size:cover; transform:translate(500px,313px);}
    #bord4a{box-sizing:border-box; height:250px; background:url('http://ekladata.com/SbW0u0NOx0uzx4aIygUmt2O5UhQ@1000x563.jpg'); background-size:cover; transform:translate(0px,313px);}
    #bord5a{box-sizing:border-box; background:url('http://ekladata.com/M6V_1-2FQifSwyV2q53yp7DUF2s@1000x563.jpg'); background-size:cover; transform:translate(250px,161px);}
    #bord1a:hover,#bord2a:hover,#bord3a:hover,#bord4a:hover,#bord5a:hover{z-index:5; width:1000px; height:563px; border-radius:0%; transform:translate(0px,0px);}
    --></style>