<figure class="snip1350 yellow">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample59.jpg" alt="sample59" /><i class="ion-chatboxes"></i>
  <a href="#"></a>
</figure>
<figure class="snip1350 blue hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample60.jpg" alt="sample60" /><i class="ion-checkmark"></i>
  <a href="#"></a>
</figure>
<figure class="snip1350 red"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample73.jpg" alt="sample73" /><i class="ion-search"></i>
  <a href="#"></a>
</figure>

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip1350 {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 230px;
  max-width: 315px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  text-align: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1350 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
figure.snip1350 img {
  max-width: 100%;
  vertical-align: top;
}
figure.snip1350 i {
  position: absolute;
  top: 0%;
  left: 50%;
  border-radius: 50%;
  font-size: 34px;
  color: #000000;
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #ffffff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
  transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  z-index: 1;
  opacity: 0;
}
figure.snip1350 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1350:after {
  background: #000000;
  width: 100%;
  height: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  opacity: 0.7;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
figure.snip1350.blue:after {
  background-color: #2472a4;
}
figure.snip1350.blue i {
  color: #20638f;
}
figure.snip1350.red:after {
  background-color: #ab3326;
}
figure.snip1350.red i {
  color: #962d22;
}
figure.snip1350.yellow:after {
  background-color: #e08e0b;
}
figure.snip1350.yellow i {
  color: #c87f0a;
}
figure.snip1350.green:after {
  background-color: #229955;
}
figure.snip1350.green i {
  color: #1e8449;
}
figure.snip1350.orange:after {
  background-color: #d67118;
}
figure.snip1350.orange i {
  color: #bf6516;
}
figure.snip1350.navy:after {
  background-color: #2b3c4e;
}
figure.snip1350.navy i {
  color: #222f3d;
}
figure.snip1350:hover i,
figure.snip1350.hover i {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
  opacity: 1;
  transition: all 400ms 0ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
figure.snip1350:hover:after,
figure.snip1350.hover:after {
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
}

$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);