JSFiddle - React, Tailwind, and code Playground

HTML

<div class="team__wrap">
  <div class="team__item">
    <div class="team__block">
      <div class="team__image" style="background-image: url(https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg);"></div>
      <a href="" class="team__details">details</a>
    </div>
  </div>
  <div class="team__item">
    <div class="team__block">
      <div class="team__image" style="background-image: url(https://bipbap.ru/wp-content/uploads/2017/04/priroda_kartinki_foto_03.jpg);"></div>
      <a href="" class="team__details">details</a>
    </div>
  </div>
</div>
<!--end team__wrap-->

CSS

.team {
	padding-top: 70px;
	padding-bottom: 20px;
}

.team__wrap {
	display: flex;
	flex-wrap: wrap;
	padding-top: 20px;
	margin: 0 -20px;
}

.team__item {
	width: calc(100% / 3 - 40px);
	margin: 0 20px;
	margin-bottom: 54px;
}

.team__block {
	position: relative;
	overflow: hidden;
	min-height: 320px;
	margin-bottom: 22px;
}

.team__block:after {
	position: absolute;
	content: ' ';
	top: 0px;
	left: 0px;
	transform: translateY(100px);
	width: 100%;
	height: 100%;
	background-color: rgba(32, 32, 44, 0.85);
	opacity: 0;
	transition: 0.3s transform, 0.3s opacity;
}

.team__block:hover .team__details {
	transform: translate(-50%, -50%);
	top: 50%;
	opacity: 1;
}

.team__block:hover:after {
	opacity: 1;
	transform: translateY(0);
}

.team__image {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.team__details {
	position: absolute;
	max-width: 156px;
	opacity: 1;
	width: 100%;
	z-index: 3;
	left: 50%;
	transform: translate(-50%, 0%);
	bottom: -200px;
	height: 46px;
	font-size: 12px;
	text-transform: uppercase;
	color: #fff;
	background-color: #68bec4;
	padding: 16px 5px;
	text-align: center;
	font-weight: 800;
	transition: 0.3s background-color, 0.3s transform;
}

.team__details:hover {
	background-color: #4f9499;
}

* {
  box-sizing: border-box;
}