JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle">
</div>

<div class="container">
  <h1> Lorem Ipsum </h1>
</div>

CSS

.circle+.container {
  height: 15em;
  width: 15em;
  background-color: skyblue;
  background-size: 200%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1rem transparent;
  border-radius: 50%;
  opacity: 35%;
  transition: 1s;
  margin: 0% 50%;
  display: grid;
  align-content: center;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.circle+.container:hover {
  opacity: 100%;
  height: 25em;
  width: 25em;
  transition: 1s;

}

h1 {
  position: center;
  font-size: 2rem;
  color: white;

}