JSFiddle - React, Tailwind, and code Playground

HTML

<div class="portfolio-project-container">
<div class="portfolio-project">
<div class="portfolio-project-image">
<ul class="portfolio-project-image">
    <li>
        <div class="portfolio-project-image-one"></div>
        <div class="portfolio-overlay"><a href="#"></a><div class="bt4">Marks & Spencer</div><div class="bt5"><a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title="">Summer Fete A5 Flyers</a></div><div class="bt6"></div></div>
    </li>
</ul>
</div>
</div>
</div>

CSS

.portfolio-overlay {
  width:100%;
  height:100%;
  opacity: 0.75;
  position:absolute;
  background-color:black;
  top:-100%;
  transition: top 0.3s ease-in-out;
  display:block;
	
}
.portfolio-overlay div {
    position:relative;
  display:inline-block;;
	
}

ul.portfolio-project-image { 
	list-style: none; 
    width:100% 

}

ul.portfolio-project-image li {
    position: relative;
    display: inline-block;
    width:100%;
  height: 100%;
  overflow: hidden;
}

li:hover .portfolio-overlay {
  top: 0;
  display:block;

	
}
.bt4 {
    text-align: center;
	margin-top: 160px;
	font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color:#FFF;
    width:100%;
    height:10px;
	margin-left:auto;
	margin-right:auto;
}
.bt5 {
    text-align: center;
	font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
	font-size: 16px;
	font-weight: 200;
	color:#FFF;
	width:100%;
    height:10px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 10px;
}

.portfolio-project {
	width: 32%;
	height: 373px;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
	margin-left:15px;
	float:left;
}


.portfolio-project-image{
	width: 100%;
	height: 373px;
}

.portfolio-project-image-one{
	width: 100%;
	height: 373px;
    background-image:url(../images/flyer_mock_up.jpg);
	background-position:center;
}



.portfolio-project-image-one:hover{
	width: 100%;
	height: 373px;
	background-image:url(../images/flyer_mock_up.jpg);
	background-position:center;
	display:block;
}

.bt5 a {
    text-align: center;
	font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
	font-size: 16px;
	font-weight: 200;
	color:#FFF;
	width:100%;
    height:10px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 10px;
	text-decoration:none;
}