<div class="snip1285">
  <h1>Magician</h1>
  <h5>Neque porro quisquam</h5>
</div>
<div class="snip1285">
  <h1>Westwood</h1>
  <h5>Cras ornare tristique</h5>
</div>
<div class="snip1285">
  <h1>Horizon</h1>
  <h5>At vero eos et</h5>
</div>

@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1285 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  color: #bdbdbd;
  margin: 70px 20px;
  max-width: 295px;
  width: 100%;
  text-align: right;
  font-size: 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.snip1285 h1,
.snip1285 h5 {
  margin: 0 0 0 50px;
  text-transform: uppercase;
}
.snip1285 h1 {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 2.8em;
  letter-spacing: -2.2px;
  line-height: 1.2em;
  position: relative;
  font-weight: 800;
  display: inline-block;
}
.snip1285 h1:after {
  content: '';
  position: absolute;
  width: 110px;
  height: 110px;
  border: 3px solid #bdbdbd;
  left: 0;
  top: 50%;
  -webkit-transform: translate(-40px, -68%);
  transform: translate(-40px, -68%);
  border-width: 4px 0 0 4px;
  border-radius: 50%;
}
.snip1285 i {
  font-size: 4.8em;
  color: #bdbdbd;
  position: relative;
}
/* Demo purposes only */
body {
  background-color: #212121;
}

  /* Demo purposes only */
  $(".hover").mouseleave(
    function () {
      $(this).removeClass("hover");
    }
  );