h1 SLICED HOVER EFFECT
p - coming with a time difference -
p.arrow >
.slicedFx
  a(href="#")
    img(src="http://bit.ly/2QkPXZn")
    - var sliceNum = '5'
    - for (var i = 0; i < sliceNum; i++)
      .slice
View Compiled
@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 : #303030;
  letter-spacing : 2px;
  background : #fff;
}
body > div {
  margin : $spacer auto;
}
h1,p {
  text-align : center;
  margin-top : $spacer;
}
.arrow {
  transform : rotate(90deg);
}

//effect code from here.

$sliceNum : 5;
$sliceWidth : 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 : #FFF;
    pointer-events : none;
    opacity : 0;
    transition : .5s opacity;
  }
  
  a , img {
    display : block;
    width : 100%;
  }
  
  .slice {
    position : absolute;
    top : 0;
    width : $sliceWidth;
    height : 100%;
    background : #303030;
    opacity : 0;
    transition : .5s all ease-in;
  }
  
  .slice:nth-of-type(odd) {
    transform : translateY(2em)
  }
  
  .slice:nth-of-type(even) {
    transform : translateY(-2em)
  }
  
  @for $i from 1 through $sliceNum {
    .slice:nth-of-type(#{$i}) {
      left : ($i - 1) * $sliceWidth;
      transition-delay : ($i - 1) * $delayTime;
    }
  }
  
  &:hover .slice {
    transform : translateY(0);
  }
  
  &:hover .slice , &:hover::after{
    opacity : .9;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.