<figure class="snip1473">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample6.jpg" alt="profile-sample6" class="profile" />
<figcaption>
<blockquote>I'm looking for something that can deliver a 50-pound payload of snow on a small feminine target. Can you suggest something? Hello...? </blockquote>
</figcaption>
<h3>Hans Down<span>Engineer</span></h3>
</figure>
<figure class="snip1473 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample7.jpg" alt="profile-sample7" class="profile" />
<figcaption>
<blockquote>Calvin: I'm a genius, but I'm a misunderstood genius. Hobbes: What's misunderstood about you? Calvin: Nobody thinks I'm a genius.</blockquote>
</figcaption>
<h3>Wisteria Widget<span>Photographer</span></h3>
</figure>
<figure class="snip1473"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample9.jpg" alt="profile-sample9" class="profile" />
<figcaption>
<blockquote>Sorry to say but 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".</blockquote>
</figcaption>
<h3>Desmond Eagle<span>Accountant</span></h3>
</figure>
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
.snip1473 {
font-family: 'Roboto', Arial, sans-serif;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #141414;
text-align: left;
line-height: 1.4em;
background-color: #e6e6e6;
padding-top: 88px;
}
.snip1473 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.snip1473 img {
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1473 figcaption {
width: 100%;
background-color: #141414;
padding: 25px;
position: relative;
color: #ffffff;
}
.snip1473 .profile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
max-height: 88px;
opacity: 1;
}
.snip1473 h3 {
font-size: 1.3em;
margin: 25px;
font-weight: 300;
position: absolute;
top: 0;
right: 0;
text-align: right;
}
.snip1473 h3 span {
display: block;
font-size: 0.65em;
font-weight: 600;
color: #bdc3c7;
}
.snip1473 blockquote {
margin: 0 0 10px;
padding: 0 0 30px;
letter-spacing: 1px;
opacity: 0.8;
font-style: italic;
font-weight: 300;
}
.snip1473 blockquote:after {
font-family: 'FontAwesome';
content: "\201C";
position: absolute;
font-size: 180px;
line-height: 1em;
color: #212121;
font-style: normal;
content: "\201D";
right: 20px;
bottom: -105px;
}
/* Demo purposes only */
body {
background-color: #212121;
}
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);