DoubleDigit,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/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: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var content = document.querySelectorAll(".content_item");
[].forEach.call(content, function(item) {
item.addEventListener('click', function() {
item.classList.toggle("hover")
});
});
});
</script>
</head>
<body><div class="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><div class="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><div class="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>
<div class="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>
</body>
</html>