JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<button>
</button>
<div class = "textcontent">
<p>some text</p>
</div>
</div>

CSS

button {
  background-color: red;
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
}

button:hover{
   box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
    -moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
    transform: translateY(-3.5rem);
    transition: all .3s ease 0s;
    border: none;
}

 .textcontent{
  visibility: hidden;
}

.active {
  visibility: 1;
  transform: translateY(-3.5rem);
  transition: all .3s ease 0s;
  background-color: black;
  color: white
  
}

JavaScript

$button = document.querySelector('button');
$textcontent = document.querySelector('textcontent');

if ($button.hover){
	$textcontent.classList.add('active')
}