CSS Polygon Animation not working while hovering on the clip path-CodePudding

A very simple example:

HTML:

<body>
    <img  src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGVuc3xlbnwwfHwwfHw=&auto=format&fit=crop&w=600&q=60" />
</body>

CSS:

.test:hover, .test:focus {
    clip-path: polygon(70% 0, 100% 30%, 100% 100%, 0 100%, 0 0);
}

Whenever I hover on the image the animation works fine but when I hover on the clip path it breaks and the full image is displayed, which is wrong. Kindly help me to maintain the animation while I hover on the clip path as well.

I want to achieve the below animation on hover, which is working:

But when I try to hover my mouse towards the below direction, the animation hides but I want that the animation should be maintained.

CodePudding user response：

Put image in container then use hover on container with image

.test {
  
  width: fit-content;
  height: fit-content;
}
.test:hover .img  {
  clip-path: polygon(70% 0, 100% 30%, 100% 100%, 0 100%, 0 0);
}

<body>
    
    <div >
      <img  src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGVuc3xlbnwwfHwwfHw=&auto=format&fit=crop&w=600&q=60" />
    </div>
    
</body>

CodePudding user response：

You can use mask if you don't want an extra wrapper:

img:hover {
  -webkit-mask: linear-gradient(-145deg,#0000 15%,#000 0);
}

<img  src="https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bGVuc3xlbnwwfHwwfHw=&auto=format&fit=crop&w=600&q=60" >