我遇到了 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>

我设置了一个代码笔来说明这个问题。我正在使用谷歌浏览器，尚未测试它是否在其他浏览器中也有问题。

将鼠标悬停在父容器的任何部分上时，将应用滤镜：模糊(1px(。但是，在过渡期间，容器的边缘story__shape似乎具有一些透明度，并沿框边缘显示线条。它们在过渡后消失了。

我尝试过"背面可见性：隐藏;"以及"意志改变：转变;"无济于事。如果有人可以帮助我，那将不胜感激。

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>