在此处输入图像说明
在盘旋时,圆形图像的左右两侧出现了一条扭曲的垂直线,看看上面链接的图像,我真的不明白为什么会出现这种情况。 这个问题没有得到解决,而且太麻烦了。
这是代码
HTML:
<div class="row">
<div class="story">
<figure class="story__shape">
<img src="img/nat-8.jpg" 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>I had such a wonderful experience with you. Your co-ordination and time management is the best thing I felt. I found that you guys give value to the people not for the money. It is so good that you are following the rules strictly when it comes for negative things. Looking forward to have many more trips.</p>
</div>
</div>
Sass CSS(SCSS):
.story{
width: 75%;
margin: 0 auto;
box-shadow: 0 3rem 6rem rgba( $color-black, .1);
background-color: $color-white;
padding: 6rem;
padding-left: 9rem;
font-size: $default-font-size;
transform: skewX(-12deg);
&__shape{
height: 15rem;
width: 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);
position: relative;
}
&__img{
height: 100%;
transform: translateX(-4rem) scale(1.4);
backface-visibility: hidden;
transition: all .5s;
}
&__text{
transform: skewX(12deg);
}
&__caption{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 20%);
color: $color-white;
text-transform: uppercase;
font-size: 1.7rem;
text-align: center;
opacity: 0;
transition: all .5s;
backface-visibility: hidden;
}
&:hover &__caption{
opacity: 1;
transform: translate(-50%, -50%);
}
&:hover &__img{
transform:translateX(-4rem) scale(1);
filter: blur(3px) brightness(80%);
} }//end of .story class
请帮忙解决这个麻烦。
因为它与背景不匹配,尝试使用透明图像