'CSS Image outside Clip-Path flickers during animations

Basically, I am trying to create a testimonial section with a circular image on left and some text on right. When the testimonial section is hovered the image blurs and zooms out a little bit. The story section is skewed a little on x-axis and its children are skewed in the opposite direction so that only the outer section remains skewed.

But when I hover the testimonial section the image border (original rectangular border of the image before applying clip-path) flickers during the transition.

I have tried multiple things like backface-visibility etc. but only by removing the transform: skewX property the flickering seems to stop. Does anybody know why this flickering occurs.

Following is the code which I am using:

HTML

<div class="story">
      <figure class="story__image-shape">
          <img class="story__image" src="img.jpg" alt="">
      </figure>
</div>

CSS

.story {
  width: 800px;
  margin: 0 auto;
  padding: 40px;
  background-color: #eee;
  overflow: hidden;
  transform: skewX(-12deg);
}
.story__image-shape {
  float: left;
  width: 150px;
  height: 150px;
  transform: skewX(12deg);
  clip-path: circle();
}
.story__image {
  height: 100%;
  transform: scale(1.4);
  transition: all 0.5s;
}
.story:hover .story__image {
  transform: scale(1);
  filter: blur(3px) brightness(80%);
}
htmlcss


Solution 1:[1]

I solved this problem by adding overflow: hidden in story__image-shape class (parent container of the image).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Danny

Related Questions