h1 SLICED HOVER EFFECT
p - ver.2 -
p.arrow >
.slicedFx
  a(href="#")
    img(src="http://bit.ly/2QkPXZn")
    - var sliceNum = '5'
    - for (var i = 0; i < sliceNum; i++)
      .slice

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');
$spacer : .5em;
* {
  margin : 0;
  padding : 0;
}
body {
  font-family: 'Roboto Condensed', sans-serif;
  padding : $spacer;
  color : #e4e4e4;
  letter-spacing : 2px;
  background : #1d1e21;
}
body > div {
  margin : $spacer auto;
}
h1,p {
  text-align : center;
  margin-top : $spacer;
}
.arrow {
  transform : rotate(90deg);
}

//effect code from here.

$sliceNum : 5;
$sliceHeight : percentage(1 / $sliceNum);
$delayTime : 70ms;

.slicedFx {
  position : relative;
  width : 250px;
  height : 250px;
  
  &::after {
    position : absolute;
    content : 'JUST HOVERED!';
    top : 50%;
    left : 50%;
    transform : translate(-50%,-50%);
    font-size : 0.8em;
    color : #1d1e21;
    pointer-events : none;
    opacity : 0;
    transition : .5s opacity;
  }
  
  a , img {
    display : block;
    width : 100%;
  }
  
  .slice {
    position : absolute;
    width : 100%;
    height : $sliceHeight;
    background : #e4e4e4;
    opacity : 0;
    transition : .5s all ease-in;
  }
  
  .slice:nth-of-type(odd) {
    transform : translateX(2em)
  }
  
  .slice:nth-of-type(even) {
    transform : translateX(-2em)
  }
  
  @for $i from 1 through $sliceNum {
    .slice:nth-of-type(#{$i}) {
      top : ($i - 1) * $sliceHeight;
      transition-delay : ($i - 1) * $delayTime;
    }
  }
  
  &:hover .slice {
    transform : translateX(0);
  }
  
  &:hover .slice , &:hover::after{
    opacity : .9;
  }
}