JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gravatar">
</div>

<div class="down">
</div>

CSS

.gravatar {
    background-color:blue;
	float: left;
	margin-top: 2px;
	margin-right: 10px;
	margin-left:  2px;
	border-radius: 20px;
    width: 40px;
	height: 40px; 
}

.down
{
    float:left;
    width: 40px;
	height: 40px;
    background-color:Red;
    opacity:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

    
	}
.hoverDown
{
    opacity:100;

}

JavaScript

$(".gravatar").mouseenter(
  function () {
    $(".down").addClass('hoverDown');
  }
);
$(".gravatar").mouseleave(
  function () {
    $(".down").removeClass('hoverDown');
  }
);