我遇到 css 故障，需要一些帮助来解决它

Question

我在解决这个问题时遇到了一些问题，希望有人能帮助我。

.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>

我有一个 codepen 设置来说明问题。我正在使用 google chrome，尚未测试其他浏览器是否也存在问题。

当您将鼠标悬停在父容器的任何部分时，将应用滤镜：blur(1px)。然而，容器的边缘 story__shape 在转换过程中似乎有一些透明度，并且沿着盒子的边缘显示线条。他们在转换后消失了。

我试过“backface-visibility: hidden;”以及“will-change: transform;”无济于事。如果有人能帮助我，那将不胜感激。

Answer 1

将overflow: hidden;添加到.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>

我遇到 css 故障，需要一些帮助来解决它

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

css

transition

blur

css-transforms