Image 2 - Border Radius - Position Absolute

admin
Arief Siswanto
2019-09-07 18:47:17
Reply Share

Image 2 - Border Radius - Position Absolute

 

<html>
    <head>
        <title>Cascading Stylesheet</title>
        <style>
            .box{
                width: 300px;
                height: 300px;
                border: 1px solid #000;
                border-radius: 50%;
                filter: grayscale(100%);
            }
            .box:hover{
                filter: unset;
            }
            .top-left{
                position: absolute;
                left:0px;
            }
            .top-right{
                position: absolute;
                left:600px;
            }
            .bottom-center{
                position: absolute;
                top: 300px;
                left: 300px;
            }
            .middle-left{
                position: absolute;
                top:150px;
                left:150px;
            }
            .middle-right{
                position: absolute;
                top:150px;
                left:450px;
            }
        </style>
    </head>
    <body>
        <img src="../image.jpg" class="box top-left" />
        <img src="../image.jpg" class="box top-right" />
        <img src="../image.jpg" class="box middle-left" />
        <img src="../image.jpg" class="box middle-right" />
        <img src="../image.jpg" class="box bottom-center" />
    </body>
</html>
No reply found.