<figure class="white-leopard">
  <img src="http://meaningtheweb.com/Tutorials/HoverEffectsInspiration/images/image09.jpg" alt="image09" />
  <div class="layer-top"></div>
  <div class="layer-bottom"></div>
  <figcaption>
    <H2><span>white </span>leopard</H2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <a href="#"></a>
  </figcaption>
</figure>

@import url(https://fonts.googleapis.com/css?family=Raleway:300,800);
.white-leopard {
  font-family: "Raleway", sans-serif;
  background-color: #38C2B7;
  position: relative;
  display: inline-block;
  overflow: hidden;
  max-width: 100%;
  width: 33.333%;
  height: 400px;
  margin: -0.135em;
  cursor: pointer;
}
.white-leopard * {
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.white-leopard img {
  position: absolute;
  right: 0;
}
.white-leopard figcaption {
   position: absolute;
  display: block;
  width: 100%;
  box-sizing: border-box;
  bottom: 0;
  color: #FFF;
  text-transform: uppercase;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  padding: 0;
  top: -webkit-calc(50% - 1.5em);
  top: calc(50% - 1.5em);
}
.white-leopard figcaption * {
  text-align: center;
}
.white-leopard H2 {
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1em;
   opacity: 0.75;
}
.white-leopard H2 > span {
  font-weight: 800;
  letter-spacing: -0.045em;
}
.white-leopard p {
  color: #80DACB;
  margin-top: 0.5em;
  opacity: 0;
}
.white-leopard div[class^="layer-"] {
  position: absolute;
  width: 50%;
  height: 60%;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.white-leopard .layer-top {
  top: -50%;
  left: -25%;
}
.white-leopard .layer-bottom {
  bottom: -50%;
  right: -25%;
}

.white-leopard:hover img {
  opacity: 0.85;
  right: -2%;
}
.white-leopard:hover .layer-top {
  left: 12.5%;
  background-color: rgba(174, 255, 249, 0.5);
}
.white-leopard:hover .layer-bottom {
  right: 12.5%;
  background-color: rgba(174, 255, 249, 0.5);
}
.white-leopard:hover H2 {
   letter-spacing: 0.35em; 
}
.white-leopard:hover p {
  opacity: 1;
}