JSFiddle - React, Tailwind, and code Playground

HTML

<div><i>TEXT</i></div>

CSS

div {
    border-radius: 50%;
    height: 150px;
    width: 150px;
    background: #b84340;
    overflow: hidden;
    margin: 100px;
}

i {
    height: 150px;
    width: 150px;
    opacity: 0;
    background: #177eb3;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    display: block;
    color: white;
    font: 600 20px/150px sans-serif;
    text-align: center;
}
    
div:hover i {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}