JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="s">
    <div class="a"></div>
</div>
<div class="circle">
    <img src="http://picsum.photos/300/300" alt="">
</div>

CSS

body {
    background: black;
}
.circle {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    /* border-radius: 50%; */
    display: flex;
    align-items: center;
    justify-content: center;
    border: 20px solid grey;
    /* overflow: hidden; */
    box-shadow: 0px 0px 15px 10px rgba(189,41,15,1);
    animation: sScale 1s ease both .5s;
}
.circle img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#s {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    background: #eee;
    border-radius: 50%;
    box-shadow: 0px 0px 15px 10px rgba(189,41,15,1);
    animation: shadow 1s ease both;
}
.a {
    width: 100%;
}
@keyframes shadow {
    from {
        visibility: hidden;
        transform: scale(0.9);
        box-shadow: 0px 0px 15px 10px rgba(189,41,15,1);
    }
    to {
        visibility: visible;
        transform: scale(1);
        box-shadow: 0px 0px 15px 10px rgba(189,41,15,0);
    }
}
@keyframes sScale {
    from {
        visibility: hidden;
        clip-path: circle(0% at 50% 50%);
    }
    90% {
        clip-path: circle(50% at 50% 50%);
    }
    to {
        visibility: visible;
        clip-path: circle(50% at 50% 50%);
    }
}