JSFiddle - React, Tailwind, and code Playground

by Aled Evans

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;

    
	}
.down:hover
{
    opacity:100;

}
.gravatar:hover + .down{

opacity:100;
	}