<!-- 
technique from 
http://generatedcontent.org/post/26407228072/split-feature 
-->

<main>

  <h1>Need glasses?</h1>

  <div class="split-image">
    <div class="box box-2">
      <img src="home-cat.jpg" />
    </div>
    <div class="slider">
      <div class="box box-1">
        <img src="home-cat.jpg" />
      </div>
    </div>
  </div>

</main>
$skew: 20deg;
$margin-left: 70px;
$slider-width: 350px;
body {
  display: flex;
  justify-content: center;
}

main {
  min-width: $slider-width*2;
  > h1 {
    text-align: center;
  }
  .split-image {
    position: relative;
  }
  .slider:hover {
    width: $slider-width*1.65;
  }
  .box-2:hover + .slider {
    width: $slider-width*.3;
  }
  .slider {
    //outline: 1px solid lightgray; //debug
    width: $slider-width;
    overflow: hidden;
    display: inline-block;
    transform: skewX( -$skew);
    transition: width 250ms;
    margin-left: -$margin-left;
    border-right: 10px solid rgba(0, 0, 0, .2);
    overflow: hidden;
    pointer-events: none;
  }
  .box-1 {
    transform: skewX($skew); // reverse skew
    margin-left: $margin-left;
    pointer-events: auto;
    &:hover {
      cursor: pointer;
    }
    &:after {
      //content: '';
      position: absolute;
      background: rgba(200, 0, 0, .1);
      width: 200%;
      height: 100%;
      top: 0;
      left: 0;
    }
    img {
      filter: blur(2px);
    }
  }
  .box-2 {
    //outline: 1px solid pink;
    position: absolute;
    top: 0;
    left: 0;
    &:hover {
      cursor: pointer;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.