I am having a css glitch and need some help solving it

Question

I am having some issues solving this problem and am hoping someone will help me out.

.story {
  width: 75%;
  margin: 0 auto;
  box-shadow: 0 3rem 6rem;
  background-color: #fff;
  border-radius: 5px;
  padding: 6rem;
  padding-left: 9rem;
  font-size: 1.6rem;
  transform: skewX(-12deg);
}

.story__shape {
  width: 15rem;
  height: 15rem;
  float: left;
  clip-path: circle(50% at 50% 50%);
  -webkit-shape-outide: circle(50% at 50% 50%);
  -webkit-shape-outsie: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  transform: skewX(12deg) translateX(-3rem);
  position: relative;
  backface-visibility: hidden;
}

.story__img {
  height: 100%;
  transform: translateX(-4rem);
  transition: all .5s;
}

.story__text {
  transform: skewX(12deg);
}

.story__caption {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.7rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  opacity: 0;
  transition: all .5s;
}

.story:hover .story__img {
  transform: translate(-4rem);
  filter: blur(2px) brightness(70%);
}

.story:hover .story__caption {
  opacity: 1;
  transform: translate(-50%, -50%);
}

<div class="row">
  <div class="story">
    <figure class="story__shape">
      <img class="story__img" src="https://image.shutterstock.com/z/stock-photo-mountains-during-sunset-beautiful-natural-landscape-in-the-summer-time-407021107.jpgg" alt="Person on a tour">
      <figcaption class="story__caption">Mary Smith</figcaption>
    </figure>
    <div class="story__text">
      <h3 class="heading-tertiary u-margin-bottom-small">I had the best week ever with my family</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta tenetur ad non doloremque, mollitia esse fugit dolores culpa ut est molestiae fuga iusto neque tempora rem ab voluptatem. Dolores, minus. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Dicta tenetur ad non doloremque, mollitia esse.
      </p>
    </div>
  </div>
</div>

I have a codepen set up to illustrate the problem. I am using google chrome, and have not yet tested to see if it is an issue in other browsers as well.

when you hover over any part of the parent container, a filter: blur(1px) is applied. However, the edges of the container story__shape seem to have some transparency during the transition, and show lines along the edge of the box. They go away after the transition.

I have tried "backface-visibility: hidden;" as well as "will-change: transform;" to no avail. If anyone can help me, that would be appreciated.

Answer 1

Add overflow: hidden; to .story__shape

.story {
  width: 75%;
  margin: 0 auto;
  box-shadow: 0 3rem 6rem;
  background-color: #fff;
  border-radius: 5px;
  padding: 6rem;
  padding-left: 9rem;
  font-size: 1.6rem;
  transform: skewX(-12deg);
}

.story__shape {
  width: 15rem;
  height: 15rem;
  float: left;
  clip-path: circle(50% at 50% 50%);
  -webkit-shape-outide: circle(50% at 50% 50%);
  -webkit-shape-outsie: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  transform: skewX(12deg) translateX(-3rem);
  position: relative;
  backface-visibility: hidden;
  overflow: hidden;
}

.story__img {
  height: 100%;
  transform: translateX(-4rem);
  transition: all .5s;
}

.story__text {
  transform: skewX(12deg);
}

.story__caption {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.7rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  text-align: center;
  opacity: 0;
  transition: all .5s;
}

.story:hover .story__img {
  transform: translate(-4rem);
  filter: blur(2px) brightness(70%);
}

.story:hover .story__caption {
  opacity: 1;
  transform: translate(-50%, -50%);
}

<div class="row">
  <div class="story">
    <figure class="story__shape">
      <img class="story__img" src="https://image.shutterstock.com/z/stock-photo-mountains-during-sunset-beautiful-natural-landscape-in-the-summer-time-407021107.jpgg" alt="Person on a tour">
      <figcaption class="story__caption">Mary Smith</figcaption>
    </figure>
    <div class="story__text">
      <h3 class="heading-tertiary u-margin-bottom-small">I had the best week ever with my family</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta tenetur ad non doloremque, mollitia esse fugit dolores culpa ut est molestiae fuga iusto neque tempora rem ab voluptatem. Dolores, minus. Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Dicta tenetur ad non doloremque, mollitia esse.
      </p>
    </div>
  </div>
</div>