JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content_item">
				  <img src="http://ecoles-nn.ru/wa-data/public/shop/products/84/59/5984/images/14732/14732.750.jpg" alt="teach1">
				  <div class="overlay"></div>
				  <div class="corner_overlay_content">Подробнее</div>
				  <div class="overlay_content">
					<h2>Image Ink Logo</h2>
					<p>Logo for a screen printing company. They wanted a detachable/recognizable brand that didn't need the name of the company.</p>
				  </div>
				</div>

CSS

#content_item {
	display: inline-block;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	height: 400px;
	margin: 20px auto;
	overflow: hidden;
	position: relative;
	width: 300px;
}

#content_item .overlay {
	border-bottom: 200px solid #e8c63d;
	border-left: 200px solid transparent;
	bottom: 0;
	height: 0;
	opacity: .95;
	position: absolute;
	right: 0px;
	text-indent: -9999px;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	width: 0;
}

#content_item:hover .overlay {
	border-bottom: 1000px solid #e8c63d;
	border-left: 1000px solid transparent;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#content_item .corner_overlay_content {
	bottom: 15px;
	color: #333;
	position: absolute;
	right: 50px;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#content_item:hover .corner_overlay_content {
	opacity: 0;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#content_item .overlay_content {
	bottom: 0;
	color: #333;
	left: 0;
	opacity: 0;
	padding: 30px;
	position: absolute;
	right: 10px;
	top: 0;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

#content_item .overlay_content h2 {
	border-bottom: 1px solid #333;
	padding: 0 0 12px;
	font-size: 12.6pt;
}

#content_item .overlay_content p {
	font-size: 10.6pt;
}

#content_item:hover .overlay_content {
	opacity: 1;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	-moz-transition-delay:...