<figure class="snip1347">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample87.jpg" alt="sample87" />
<div class="date">September 14th, 2015</div>
<figcaption>
<h2>The world ended yesterday</h2>
<p>I'm looking for something that can deliver a 50-pound payload of snow on a small feminine target. Can you suggest something? Hello...? </p><a href="#" class="read-more">Read More</a>
</figcaption>
</figure>
<figure class="snip1347 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample74.jpg" alt="sample74" />
<div class="date">October 12th, 2015</div>
<figcaption>
<h2>Large yellow ball seen in sky over Ireland</h2>
<p>Calvin: I'm a genius, but I'm a misunderstood genius. Hobbes: What's misunderstood about you? Calvin: Nobody thinks I'm a genius.</p><a href="#" class="read-more">Read More</a>
</figcaption>
</figure>
<figure class="snip1347"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample69.jpg" alt="sample69" />
<div class="date">November 30th, 2015</div>
<figcaption>
<h2>Weekend to be extended to Thursday</h2>
<p>If you want to stay dad you've got to polish your image. I think the image we need to create for you is "repentant but learning".</p><a href="#" class="read-more">Read More</a>
</figcaption>
</figure>
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,600);
.snip1347 {
font-family: 'Roboto', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
text-align: left;
line-height: 1.4em;
background-color: #141414;
}
.snip1347 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.snip1347 img {
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1347 .date {
position: absolute;
background-color: #1e1e1e;
top: 0;
right: 0;
width: 100%;
padding: 10px 25px 0;
text-align: right;
font-size: 0.8em;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
}
.snip1347 .date:before {
position: absolute;
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 400px 55px 0;
border-color: transparent #1e1e1e transparent transparent;
}
.snip1347 figcaption {
width: 100%;
background-color: #141414;
padding: 0 25px 25px;
position: relative;
}
.snip1347 figcaption:before {
position: absolute;
content: '';
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1347 figcaption a {
padding: 5px;
border: 1px solid #ffffff;
color: #ffffff;
font-size: 0.7em;
text-transform: uppercase;
text-decoration: none;
margin: 10px 0;
display: inline-block;
opacity: 0.65;
width: 47%;
text-align: center;
font-weight: 600;
letter-spacing: 1px;
}
.snip1347 figcaption a:hover {
opacity: 1;
}
.snip1347 h2 {
margin: 0 0 10px;
font-weight: 300;
font-size: 1.5em;
line-height: 1.2em;
}
.snip1347 p {
margin: 0 0 10px;
font-size: 0.8em;
letter-spacing: 1px;
opacity: 0.8;
}
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);