JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Circle Hover Effects with CSS Transitions</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" type="text/css" href="normalize.css"/>
        
    </head>
    <body>
<ul class="my_ul">
    <li>
        <div class="circle_container">
            <div class="info">
                <h3>Test</h3>
                <p>
                    This is a test paragraph.
                </p>
            </div>
        </div>
    </li>
</ul>
    </body>
</html>

CSS

.my_ul{
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
    display: block;
    text-align: center;
    width: 100%;
}

.my_ul:after,.circle_container:before{
      content: '';
    display: table;
}

.my_ul{
    clear: both;
}

.my_ul li{
       width: 220px;
    height: 220px;
    display: inline-block;
    margin: 20px;
}

.circle_container{
     width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    cursor: default;
    -webkit-box-shadow: inset 0px 1px 0px 15px #333;
    box-shadow: inset 0px 1px 0px 15px #333;
}

.info{
    position: absolute;
    background: rgba(63,147,147, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        -moz-transform: scale(0) rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(0) rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(0) rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(0) rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(0) rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform-origin: 25%;
}

.circle_container:hover{
    -webkit-box-shadow: inset 0px 1px 0px 1px #333;
    box-shadow: inset 0px 1px 0px 1px #333;
}

.circle_container:hover .info{
    opacity:1;
    -moz-transform: scale(1) rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(deg)...