JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="img1"></div>
<div class="img2"></div>
<button>action</button>

CSS

div.img1 {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(https://picsum.photos/1920/1000) no-repeat;
  background-size: cover;
  background-position: center;
  top: 0;
  left: 0;
  z-index: 2;
}
div.img2 {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(https://picsum.photos/1920/1100) no-repeat;
  background-size: cover;
  background-position: center;
  top: 0;
  left: 0;
  visibility: hidden;
}
button {
  position: absolute;
  z-index: 9;
}
.active {
  animation: luka 2s forwards;
  z-index: 3;
  visibility: visible !important;
}
@keyframes luka {
  from {
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  to {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

JavaScript

$('button').click(function(){
	$('.img2').addClass('active');
})