svg-clip-path

by Kim Ara

HTML

<div></div>

CSS

div {
    width: 280px;
    height: 280px;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
  background-size: cover;
  transition: 0.4s cubic-bezier(1, -1, 0, 2);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
div:hover {
  clip-path: polygon(50% 19%, 0 76%, 100% 76%);
}

/* Center the demo */
html, body { height: 100%; }
body {
    display: flex;
    justify-content: center;
    align-items: center;
}