Diagonal Line Mask

Animated responsive diagonal line from top left to bottom right with mask

by Marc Cots Navarro

HTML

<button class="btn">CLICK</button>
<div class="diagonal"></div>
<div class="div-one">

    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2009-28-b-large_web.jpg'>

</div>

<div class="div-two" >

<img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2013-06-a-large_web.jpg'>

</div>

CSS

html {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
  height: 100%;
  background: #fff;
}

button {
  position: absolute;
  z-index:999;
}

.diagonal.animate {
  width: 100%;
  height: 100%;
  transition: all 2s ease;
}

.diagonal {
  width: 0%;
  height: 0%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='0' x2='90%' y2='100%' stroke='black' stroke-width='1'/></svg>") no-repeat;
}

div {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.div-one {
  -webkit-clip-path: polygon(90% 100%, 100% 100%, 100% 0, 0% 0%);
  clip-path: polygon(0% 0%, 100% 0%, 100vw 0);
  background: url('http://i.imgur.com/8LgIL7B.jpg') center / cover no-repeat; 
  z-index: -1;
}

.div-two {
  -webkit-clip-path: polygon(0% 100%, 0% 0%, 90vw 100vh);
  clip-path: polygon(0% 100%, 0% 0%, 100vw 100vh);
  background: url('http://i.imgur.com/fBL4WC1.jpg') center / cover no-repeat; 
  z-index: -1;
}

body {
  margin: 0;
  overflow: hidden;
}

JavaScript

$('.btn').on('click', function(e) {
  $('.diagonal').toggleClass("animate");
});