JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 500px"></div>
<div class="container">
        <span class="white"></span>
</div>

CSS

div {background:#ed565d;}
.container {height:500px;width:100%;position:relative;}
.container span {display:block;}
.white {background:#ffffff;height:10px;width:10px;margin:auto;border-radius:100%;position:absolute;top:50%;left:50%;}
.container:hover .white {
    width:300%;
    height:300%;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition:all 0.5s ease-out;
    top:-100%;
    left:-100%;
}