img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);
  transition: all linear 0.3s;
  height: 80vh;
}
img:hover {
  clip-path: polygon(43.5% 4.7%, 56.5% 4.7%, 93% 100%, 75.4% 100%, 50% 32.9%, 31.5% 82.4%, 50% 82.4%, 56.2% 100%, 7% 100%);
  -webkit-clip-path: polygon(43.5% 4.7%, 56.5% 4.7%, 93% 100%, 75.4% 100%, 50% 32.9%, 31.5% 82.4%, 50% 82.4%, 56.2% 100%, 7% 100%);
  filter: hue-rotate(120deg);
  -webkit-filter: hue-rotate(120deg);
}
.container {
  width: 568px;
  margin: auto;
}