JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stylish-popular-widget">
					<a href="#">
					<div class="meta-text">
						<h3><a href="#">
						TEST</h3>
						<span class="date">thstrhsthths</span></a>
					</div>
					</a>
				</div>

CSS

.stylish-popular-widget:hover .meta-text h3 a {
  color: black!important;
}

.stylish-popular-widget:hover .meta-text h3 a  {
  transition: color .3 all ease;
}

.stylish-popular-widget
{
	height: 150px;
	position: relative;
	width: 100%;
	
}
.stylish-popular-widget img
{
	height: 150px;
	max-width: 100%;
}
.stylish-popular-widget .meta-text
{
	background: rgba(0,0,0,.3);
	bottom: 0;
	top: 65%; /*adjust BG start position*/
	left: 0;
	right: 0;
	position: absolute;
	text-align: left;
	padding-left: 10px;
}
	
.stylish-popular-widget .meta-text h3
{
	color: #FF0000 !important;
	
}
.stylish-popular-widget .meta-text h3 a
{
	color: #fff !important;
	font-size: 25px;
	letter-spacing: 1px;
	
	
}
.stylish-popular-widget .meta-text h3 a:hover 
{
	text-decoration: none;
	color: #000 !important;
	
}

.stylish-popular-widget .meta-text h3 :hover 
{
	text-decoration: none;
	color: #000 !important;
	
}
.stylish-popular-widget .meta-text span.date
{
	color: rgba(59,59,59,1);
	font-size: 11px;
	letter-spacing: 1px;
	padding-top: 30px;
	
}
.stylish-popular-widget:hover > .meta-text
{
	background: rgba(255,255,255,.8);		
	top:inherit;
    top: 0;
		
}