<div class="snip1331">
<h1>Woodstone</h1>
<h5>Neque porro quisquam</h5>
<h6>Est. 1958</h6>
</div>
<div class="snip1331">
<h1>Vanguard</h1>
<h5>Cras ornare tristique elit</h5>
<h6>Est. 1965</h6>
</div>
<div class="snip1331">
<h1>Spartacus</h1>
<h5>At vero eos et accusamus</h5>
<h6>Est. 1977</h6>
</div>
@import url(https://fonts.googleapis.com/css?family=Raleway:500);
@import url(https://fonts.googleapis.com/css?family=Lora:700);
.snip1331 {
font-family: 'Raleway', Arial, sans-serif;
position: relative;
color: #bdbdbd;
margin: 60px 25px;
max-width: 285px;
width: 100%;
text-align: center;
font-size: 16px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.snip1331 h1,
.snip1331 h5 {
margin: 0;
text-transform: uppercase;
}
.snip1331 h1 {
font-family: 'Lora', Arial, sans-serif;
font-weight: 700;
font-size: 1.8em;
line-height: 50px;
position: relative;
background-color: #bdbdbd;
color: #212121;
text-align: center;
margin: 0 30px 8px;
border-top: 6px solid #212121;
border-bottom: 6px solid #212121;
}
.snip1331 h1:before,
.snip1331 h1:after {
content: '';
position: absolute;
width: 0;
height: 0;
top: 5px;
border-width: 25px 10px;
border-style: solid;
}
.snip1331 h1:before {
left: -23px;
border-color: #bdbdbd #bdbdbd #bdbdbd transparent;
}
.snip1331 h1:after {
right: -23px;
border-color: #bdbdbd transparent #bdbdbd #bdbdbd;
}
.snip1331 h5 {
font-weight: 500;
font-size: 0.6em;
}
.snip1331 h6 {
margin: 0;
display: inline-block;
position: relative;
}
.snip1331 h6:before,
.snip1331 h6:after {
position: absolute;
height: 1px;
content: '';
background: #bdbdbd;
width: 30px;
top: 50%;
}
.snip1331 h6:before {
left: -35px;
}
.snip1331 h6:after {
right: -35px;
}
.snip1331:before {
content: '';
position: absolute;
width: 180px;
height: 180px;
border: 8px solid #bdbdbd;
left: 50%;
top: 50%;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(45deg) translate(-50%, -50%);
transform: rotate(45deg) translate(-50%, -50%);
border-radius: 50%;
}
/* Demo purposes only */
body {
background-color: #212121;
}
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);