JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#">
  <div class="imgwrap">
    <p>Pikaboo text</p>
    <img src="http://placehold.it/260x200" width="260" height="200" />
  </div>
</a>

CSS

.imgwrap
{
	width:260px;
	height:200px;
	position:relative;
}

.imgwrap p
{
	position:absolute;
	margin:0;
	background-color:blue;
	top:0;
	left:0;
	color:white;
	width:260px;
	height:200px;
	visibility:hidden;
	line-height:200px;
	text-align:center;

	
}

.imgwrap:hover p
{
	visibility:visible;
}