JSFiddle - React, Tailwind, and code Playground

HTML

<div class="photo photo2">Some title
				<div class="photobl photobl2">
					<h3>Some title</h3>
					<p>text</p>
				</div> 
			</div>

CSS

.photo{
	width: 244px;
	height: 219px;
	float: left;
	color: #fff;
	position: relative;
	font-size: 23px;
	font-weight: 700;
	text-align: center;
	padding-top: 180px;
	-webkit-transition:all .4s ease;
	-moz-transition:all .4s ease;
	-ms-transition:all .4s ease;
	transition: all .4s ease;
  
  background-color: #f8f8f8;/**/
	}
.photo:hover{
	color: rgba(0, 0, 0, 0);
}
.photo:hover .photobl{
	display: block;
}
.photobl{
	display: none;
	width: 244px;
	height: 399px;
	position: absolute;
	background: rgba(0, 0, 0, 0.5) url('../images/logomin.png') center 40px no-repeat;
	top: 0;
	-webkit-transition: display .4s ease;
	-moz-transition: display .4s ease;
	-ms-transition: display .4s ease;
	transition: display .4s ease;
	}
.photobl h3{
	font-size: 23px;
	font-weight: 700;
	color: #ffcc00;
	padding-top: 181px;
	padding-bottom: 30px;
	}
.photobl p{
	font-size: 16px;
	font-weight: 300;
	color: #fff;
	line-height: 1.3;
	}