JSFiddle - React, Tailwind, and code Playground

HTML

<table id="gallerytable">
    <tr>
        <td><a href="a.html"><div id="galleryTitle">Test 1</div><div id="galleryThumbnail"></div></a></td>
    </tr>
    
    <tr>
        <td><a href="b.html"><div id="galleryTitle">test 2</div><div id="galleryThumbnail"></div></a></td>
    </tr>
</table>

CSS

#galleryTitle{
	background-color:rgba(48,161,226,0.40);
	position:absolute;
    height:46px;
    width:292px;
    z-index:1;
	margin-top:150px;
	color:#fff;
	font-size:22px;
	font-family:Segoe UI;
	padding-left:8px;
	padding-top:4px;
}

#galleryTitle:hover{
	background-color:rgba(48,161,226,1.0);
}

#galleryThumbnail{
    height:200px;
    width:300px;
    position:absolute;
    background-color:#2b2b2b;
}