<figure class="snip1533">
<figcaption>
<blockquote>
<p>If you do the job badly enough, sometimes you don't get asked to do it again.</p>
</blockquote>
<h3>Wisteria Ravenclaw</h3>
<h4>Google Inc.</h4>
</figcaption>
</figure>
<figure class="snip1533">
<figcaption>
<blockquote>
<p>I'm killing time while I wait for life to shower me with meaning and happiness.</p>
</blockquote>
<h3>Ursula Gurnmeister</h3>
<h4>Facebook</h4>
</figcaption>
</figure>
<figure class="snip1533">
<figcaption>
<blockquote>
<p>The only skills I have the patience to learn are those that have no real application in life. </p>
</blockquote>
<h3>Ingredia Nutrisha</h3>
<h4>Twitter</h4>
</figcaption>
</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);
.snip1533 {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
color: #9e9e9e;
display: inline-block;
font-family: 'Roboto', Arial, sans-serif;
font-size: 16px;
margin: 35px 10px 10px;
max-width: 310px;
min-width: 250px;
position: relative;
text-align: center;
width: 100%;
background-color: #ffffff;
border-radius: 5px;
border-top: 5px solid #d2652d;
}
.snip1533 *,
.snip1533 *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
.snip1533 figcaption {
padding: 13% 10% 12%;
}
.snip1533 figcaption:before {
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
color: #d2652d;
content: "\f10e";
font-family: 'FontAwesome';
font-size: 32px;
font-style: normal;
left: 50%;
line-height: 60px;
position: absolute;
top: -30px;
width: 60px;
}
.snip1533 h3 {
color: #3c3c3c;
font-size: 20px;
font-weight: 300;
line-height: 24px;
margin: 10px 0 5px;
}
.snip1533 h4 {
font-weight: 400;
margin: 0;
opacity: 0.5;
}
.snip1533 blockquote {
font-style: italic;
font-weight: 300;
margin: 0 0 20px;
}
/* Demo purposes only */
body {
background-color: #212121;
text-align: center;
}
$(".hover").mouseleave(
function() {
$(this).removeClass("hover");
}
);