body {
  margin: 0;
  padding: 0;
  background-color: #555;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  width: 800px;
  height: 500px;
  background-color: #222;
}

.clip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}

.clip1 {
  background: url(1.jpg);
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, 17% 0, 49% 100%, 0% 100%);
}

.clip2 {
  background: url(2.jpg);
  background-size: cover;
  background-position: center;
  clip-path: polygon(13% 0, 81% 0, 59% 100%, 36% 100%);
}

.clip3 {
  background: url(3.jpg);
  background-size: cover;
  background-position: center;
  clip-path: polygon(79% 0, 100% 0, 100% 100%, 59% 100%);
}

.container:hover .clip {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.container .clip:hover {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}