JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="mycircle"></div>
    <div class="mycircle"></div>
    <div class="mycircle"></div>
</div>

CSS

/* replaced .BigCircle with .mycircle:hover::after */
.mycircle,.mycircle:hover::after{
    width:50px;
    height:50px; 
    border-radius:30px; 
    background-color:grey; 
    margin:3px
}

.mycircle:hover{
    background:yellow
}

    .parent {
        position: relative;
    }
    
    .mycircle:hover::after { 
        content: "";
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
        margin-top: 0;
    }