In the process of creating a story section for the website, I have included the following scss code for a story:
.story{
width: 75%;
background-color: $color-white;
font-size: 1.6rem;
margin: 0 auto;
box-shadow: 0 3rem 6rem rgba(0,0,0,0.2);
border-radius: .1rem;
padding: 4rem;
padding-left: 5.5rem;
transform: skewX(-12deg);
&__shape{
height: 15rem;
width: 15rem;
float: left;
shape-outside: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
transform: translateX(-1.5rem) 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%);
font-size: 1.7rem;
text-transform: uppercase;
color: $color-white;
text-align: center;
opacity: 0;
transition: all .5s;
backface-visibility: hidden;
}
&:hover &__caption{
transform: translate(-50%,-50%);
opacity: 1;
}
&:hover &__img{
transform: translateX(-4rem) scale(1);
filter: blur(3px) brightness(80%);
}
}
Upon hovering, a vertical line appears on the right side of the image and is no longer visible when not hovered over. Images of the issue are shown below.
Without hover: https://i.sstatic.net/0LTD4.png
With hover: https://i.sstatic.net/NdrHg.png
This issue is specific to Google Chrome and does not occur in Mozilla Firefox.