JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
   <img src="https://secure.gravatar.com/avatar/8ab673c4bc3b7bc228ed7e431019f0b6?s=160&d=mm&r=pg">
   <div class="overlay">
   </div>
</div>

CSS

.container{
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    overflow: hidden;
    margin: 0 auto;
}
.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #49c8ff;
    opacity: 0;
    top: 0px;
    
    transition:         all 300ms ease;;
						-moz-transition:    all 300ms ease;
						-webkit-transition: all 300ms ease;
						-o-transition:      all 300ms ease;
						-ms-transition:     all 300ms ease;
}
.container:hover .overlay{
    opacity: 1;
}