<div class="holder">
  <a href="#" class="love">
    <svg x="0px" y="0px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve">
      <path fill="#010202"          d="M10,1C8.8,1,7.7,1.5,7,2.4l0,0C6.3,1.5,5.2,1,4,1C1.8,1,0,2.8,0,5c0,1.2,0.6,2.4,1.5,3.1L7,13l5.7-5
      C13.5,7.3,14,6.2,14,5C14,2.8,12.2,1,10,1z"/>
    </svg>
  </a>
  <svg class="play" x="0px" y="0px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve">
    <path fill="#FFFFFF" d="M4.6,10.2L11.1,7L4.6,3.8V10.2z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7
	C14,3.1,10.8,0,7,0z M7,12.8c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8C12.8,10.2,10.2,12.8,7,12.8z"/>
  </svg>
  <svg class="play shadow" x="0px" y="0px" viewBox="0 0 14 14" enable-background="new 0 0 14 14" xml:space="preserve">
    <path fill="#FFFFFF" d="M4.6,10.2L11.1,7L4.6,3.8V10.2z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M7,0C3.1,0,0,3.1,0,7c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7
	C14,3.1,10.8,0,7,0z M7,12.8c-3.2,0-5.8-2.6-5.8-5.8c0-3.2,2.6-5.8,5.8-5.8c3.2,0,5.8,2.6,5.8,5.8C12.8,10.2,10.2,12.8,7,12.8z"/>
  </svg>
  <img src="https://source.unsplash.com/400x300/?robot" alt="robot" />
  <div class="title">
    <h2>
      <strong>Now</strong>
      Transformers
      <small>Revenge of the fallen</small>
    </h2>
  </div>
</div>

// get me some fonts son
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,700,900,600);

// colour
@teal: #0096a0;
@rhino: #4f585e;
@red: #7d4545;
@grey: #dce1df;
@love: #c76868;

// mixins
.transition(@args: all 0.3s ease-in) {
  transition: @args;
}

body, html {
  background: @grey;
  font-family: "Source Sans Pro";
}
img {
  height: 300px;
  width: 400px;
}
div.holder {
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 0 60px darken(@grey, 20);
  cursor: pointer;
  height: 233px;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
  a.love {
    display: block;
    height: 22px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    z-index: 30;
    svg {
      height: 18px;
      width: 18px;
      path {
        fill: lighten(@love, 30);
        .transition(all 0.15s linear);
      }
    }
  }
  a.love:hover {
    svg {
      path {
        fill: @love;
      }
    }
  }
  svg.play {
    height: 100px;
    left: 65px;
    position: absolute;
    top: 65px;
    .transition(all 0.15s ease-out);
    width: 100px;
    z-index: 10;
  }
  svg.shadow {
    top: 69px;
    z-index: 5;
    path {
      fill: rgba(0,0,0,0.25);
    }
  }
  img {
    .transition(all 0.15s linear);
  }
  &:after {
    background: rgba(0,0,0,0.15);
    content: "";
    display: block;
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    transform: skew(-12deg);
    .transition(all 0.15s linear);
    width: 200%;
    z-index: 5;
  }
}

div.title {
  cursor: pointer;
  height: 100%;
  letter-spacing: -0.05em;
  position: absolute;
  right: 0;
  .transition(all 0.15s linear);
  top: 0;
  width: 50%;
  z-index: 20;

  &:after {
    background: #fff;
    box-shadow: -3px 0 1px rgba(0,0,0,0.2);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    transform: skew(-12deg);
    .transition(all 0.15s linear);
    width: 200%;
    z-index: 5;
  }

  h2 {
    bottom: 20px;
    color: @teal;
    font-size: 24px;
    font-weight: 700;
    left: 10px;
    margin: 0;
    overflow: hidden;
    padding: 10px 20px;
    position: absolute;
    text-overflow: ellipsis;
    .transition(all 0.15s linear);
    white-space: nowrap;
    width: 220px;
    z-index: 10;
    strong {
      color: @rhino;
      display: block;
      font-size: 18px;
    }
    small {
      color: @rhino;
      display: block;
      font-size: 18px;
      font-weight: 300;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 200px;
    }
  }
}

div.holder:hover {
  svg.play {
    transform: scale(3);
  }
  &:after {
    box-shadow: -10px 0 64px rgba(0,0,0,0.5);
    transform: translateX(-20px) skew(-12deg);
  }
  img {
    transform: translateX(-10px);
  }
  div.title {
    h2 {
      transform: translateX(-32px);
    }
    &:after {
      transform: translateX(-20px) skew(-12deg);
    }
  }
}