JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="cont_circulo">
    <div class="circulo">
        <div class="con_texto">
            <div class="texto">
              <p>hola etseban </p>
              <p>hola como estas</p>
            </div>
        </div>
    </div>
</div>

CSS

body{margin:100px;}
.cont_circulo{width:50px; height:50px; background:blue;
  border-radius:50%; display:block;position:relative;-webkit-transition: 3s;}
.circulo{width:30px; height:30px; background:green; border-radius:50%;
    display:block; position:absolute; top:50%; left:50%; margin:-15px 0 0 -15px; overflow:hidden; }
.circulo .con_texto{text-align:center;line-height:14px;display:none;
 position:relative; }

.circulo .con_texto .texto{margin:100px 0 0 0;-webkit-transition: 3s;}

.cont_circulo:hover {width:200px; height:200px; margin:-100px 0 0 -100px;}
.cont_circulo:hover .circulo{width:100px; height:100px; margin:-50px 0 0 -50px; }
.cont_circulo:hover .circulo .con_texto{display:block;}
.cont_circulo:hover .circulo .con_texto .texto{margin:0px;-webkit-transition: 3s;}