JSFiddle - React, Tailwind, and code Playground

by MrRadar

HTML

<ul class="works__imgs">
		<li class="img__item">
			<img src="http://center-plitki.ru/images/valkir%20karmin%2040x40.jpg" alt="Image">
			<div class="overlay"><a href="#">Посмотреть работу<br><nav class="overlay__special">Смотреть</nav></a></div>
		</li>
		<li class="img__item">
			<img src="http://center-plitki.ru/images/valkir%20karmin%2040x40.jpg" alt="Image">
			<div class="overlay"><a href="#">Посмотреть работу<br><nav class="overlay__special">Смотреть</nav></a></div>
		</li>
		<li class="img__item">
			<img src="http://center-plitki.ru/images/valkir%20karmin%2040x40.jpg" alt="Image">
			<div class="overlay"><a href="#">Посмотреть работу<br><nav class="overlay__special">Смотреть</nav></a></div>
		</li>
	</ul>

CSS

.works__imgs {
	margin: 0;
	padding: 0;
}

.img__item {
	display: block;
	float: left;
	margin-right: 20px;
	margin-bottom: 125px;
	position: relative;
}

.img__item:nth-child(3) {
	margin: 0px;
	margin-bottom: 125px;
}

.overlay {
	width: 100%;
	height: 99%;
	box-sizing: border-box;
	background: rgba(0,0,0,0.5);
	position: absolute;
	left: 0px;
	top: 0px;
	color: #fff;
	text-align: center;
	padding: 130px 0 0 0;
	opacity: 0;
	transition: all 0.5s ease;
	font-family: 'Museo Sans Cyrl Black', Arial, sans-serif;
	font-size: 15px;
	text-transform: uppercase;
}

.works__imgs li a {
	color: #fff;
	text-decoration: none;
}

.overlay:hover {
	opacity: 1;
}

.overlay__special {
	font-family: 'Museo Sans Cyrl Light', Arial, sans-serif;
	font-size: 13px;
	border-bottom: 1px solid #fff;
	display: inline-block;
	padding-top: 10px;
	text-transform: none;
}