JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        <div class="project">
            <h3 class="black product">Dash</h3>
            <a href="#" class="black hide">view project</a>
        </div>
        <div class="project">
            <h3 class="black product">5/3/1</h3>
            <a href="#" class="black hide">view project</a>
        </div>
</body

CSS

.hide {
	display: none;
}

div.project:hover h3{
	line-height: 200px;
}

div.project:hover .hide {
	display: inline-block;
}

div.project {
	display: inline-block;
	position: relative;
	overflow: hidden;
	width: 300px;
	height: 300px;
	border: 2px solid #222;
	margin: 0px 20px 20px 20px;
    float: left;
}