JSFiddle - React, Tailwind, and code Playground

HTML

<div class="portfolio-item">
				<a href="#" rel="bookmark">
					<div class="hover-in">
						<p>Portfolio Name</p>
					</div>
				</a>
			</div>
    <div class="portfolio-item">
				<a href="#" rel="bookmark">
					<div class="hover-in">
						<p>Portfolio Name</p>
					</div>
				</a>
			</div>
        <div class="portfolio-item">
				<a href="#" rel="bookmark">
					<div class="hover-in">
						<p>Portfolio Name</p>
					</div>
				</a>
			</div>

CSS

/* Portfolio */
.portfolio-item {
margin: 0;
width: 33%;
height: 500px;
float: left;
padding: 0;
background-image: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}
.portfolio-item .attachment-post-thumbnail {
margin: 0;
height: 100%;
width: 100%;
transition: .5s;
}

.portfolio-item a {
    text-align:center;
    color:#fff;
    top:50%;
    margin-top:-8px; /*(font-size / 2)*/
}