• Exemple 182

    Sur le même principe... vignettes en rond, ombre 3D, bordure et fond

    Survol

     

     

     

     

     

    <div style="width: 1000px; height: 562px; margin: 5px auto; border: 1px solid black; background: linear-gradient(to bottom, #CC9966 0%, #CC9999 100%);">
    <p id="vd0">Survol</p>
    <p id="vd1" class="vd">&nbsp;</p>
    <p id="vd2" class="vd">&nbsp;</p>
    <p id="vd3" class="vd">&nbsp;</p>
    <p id="vd4" class="vd">&nbsp;</p>
    <p id="vd5" class="vd">&nbsp;</p>
    </div>

    <style><!--
    #vd0{position:absolute; z-index:1; width:200px; transform:translate(400px,20px); font-size:30px;}
    .vd{position:absolute; z-index:1; width:200px; height:200px; border-radius:50%; box-shadow:inset 6px 6px 10px black, inset -6px -6px 10px white; 1s linear;}
    #vd1{box-sizing:border-box; background:url('http://ekladata.com/oJUiDwKgQm0BKWvyluBaTfd-f5Q.jpg'); background-size:cover; transform:translate(70px,250px) rotate(-20deg);}
    #vd2{box-sizing:border-box; background:url('http://ekladata.com/P-rjjq68zcXiv-PqncToNC31kmg.jpg'); background-size:cover; transform:translate(710px,250px) rotate(20deg);}
    #vd3{box-sizing:border-box; background:url('http://ekladata.com/xvO7G2MZPwhxd3PGkKNnH3_1f3s.jpg'); background-size:cover; transform:translate(210px,150px) rotate(-10deg);}
    #vd4{box-sizing:border-box; background:url('http://ekladata.com/kUL2N9YVZK9S3NxqS14tJ0JhVRg.jpg'); background-size:cover; transform:translate(570px,150px) rotate(10deg);}
    #vd5{box-sizing:border-box; background:url('http://ekladata.com/U9LkGi0TxgifkH6y2p9EKjc2pVs.jpg'); background-size:cover; transform:translate(390px,100px) rotate(0deg);}
    #vd1:hover,#vd2:hover,#vd3:hover,#vd4:hover,#vd5:hover{z-index:5; width:1000px; height:562px; border-radius:0%; transform:translate(0px,0px) rotate(0deg);}
    --></style>