clip-path leaves straight lines around my circle - css

Question

I used clip-path to create a circle in which my image can zoom out and a filter gets applied to it.
But for some reason straight lines are visible during the hover transition.
Wierd lines around image
.u-center-text {
text-align: center !important;
}
.u-margin-bottom-small {
margin-bottom: 1.5rem !important;
}
.u-margin-bottom-medium {
margin-bottom: 4rem !important;
}
.u-margin-bottom-big {
margin-bottom: 8rem !important;
}
.u-margin-top-big {
margin-top: 8rem !important;
}
.u-margin-top-huge {
margin-top: 10rem !important;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
padding: 3rem;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
box-sizing: border-box;
}
.story {
width: 75%;
margin: 0 auto;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
background-color: #fff;
border-radius: 3px;
padding: 6rem;
padding-left: 9rem;
font-size: 1.6rem;
transform: skewX(-12deg);
margin-bottom: 10rem;
}
.story__shape {
width: 15rem;
height: 15rem;
float: left;
-webkit-shape-outside: circle(50% at 50% 50%);
shape-outside: circle(50% at 50% 50%);
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
transform: translateX(-3rem) skewX(12deg);
}
.story__img {
height: 100%;
transform: scale(2.5);
transition: all 0.4s;
overflow: hidden;
}
.story__text {
transform: skewX(12deg);
}
.story__caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 20%);
color: #fff;
font-size: 1.7rem;
text-align: center;
opacity: 0;
transition: all 0.4s;
}
.story:hover .story__caption {
opacity: 1;
transform: translate(-50%, -50%);
}
.story:hover .story__img {
transform: scale(2);
filter: blur(3px) brightness(80%);
}
<div class="row">
<div class="story">
<figure class="story__shape">
<img src="https://images.unsplash.com/photo-1595169269488-02a14b7197c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Person on a tour" class="story__img">
<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. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus
quam nisi exercitationem omnis earum qui.
</p>
</div>
</div>
</div>

Answer 1

Add overflow:hidden to .story__shape
.u-center-text {
text-align: center !important;
}
.u-margin-bottom-small {
margin-bottom: 1.5rem !important;
}
.u-margin-bottom-medium {
margin-bottom: 4rem !important;
}
.u-margin-bottom-big {
margin-bottom: 8rem !important;
}
.u-margin-top-big {
margin-top: 8rem !important;
}
.u-margin-top-huge {
margin-top: 10rem !important;
}
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
padding: 3rem;
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
box-sizing: border-box;
}
.story {
width: 75%;
margin: 0 auto;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
background-color: #fff;
border-radius: 3px;
padding: 6rem;
padding-left: 9rem;
font-size: 1.6rem;
transform: skewX(-12deg);
margin-bottom: 10rem;
}
.story__shape {
width: 15rem;
height: 15rem;
float: left;
-webkit-shape-outside: circle(50% at 50% 50%);
shape-outside: circle(50% at 50% 50%);
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
transform: translateX(-3rem) skewX(12deg);
overflow:hidden;
}
.story__img {
height: 100%;
transform: scale(2.5);
transition: all 0.4s;
overflow: hidden;
}
.story__text {
transform: skewX(12deg);
}
.story__caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 20%);
color: #fff;
font-size: 1.7rem;
text-align: center;
opacity: 0;
transition: all 0.4s;
}
.story:hover .story__caption {
opacity: 1;
transform: translate(-50%, -50%);
}
.story:hover .story__img {
transform: scale(2);
filter: blur(3px) brightness(80%);
}
<div class="row">
<div class="story">
<figure class="story__shape">
<img src="https://images.unsplash.com/photo-1595169269488-02a14b7197c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Person on a tour" class="story__img">
<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. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus
quam nisi exercitationem omnis earum qui.
</p>
</div>
</div>
</div>