Сталкивался кто с таким? При наведении картинка должнай уйти вправо и вверх и у её оверлея меняется прозрачность, но периодически картинка как бы раздваивается при наведении. И это только в мозилле в хроме и опере нормально работает.
Вот сам глюк на стоп кадре, картинка сместилась с появился оверлэй, но она как сзади.
Через секунду отрисовывается правильно.
HTML ---
<div class="storyImg">
<a class="imgItem" href="#"><img src="img/aboutUs/1.jpg" alt=""><span><i class="fas fa-user-friends"></i><br>super team</span> </a>
<a class="imgItem" href="#"><img src="img/aboutUs/2.jpg" alt=""><span><i class="far fa-tachometer-fast"></i><br>Swift delivery</span></a>
<a class="imgItem" href="#"><img src="img/aboutUs/3.jpg" alt=""><span><i class="fas fa-gavel"></i><br>high quality</span></a>
</div>
CSS ---
.storyImg{
display: flex;
flex-wrap: wrap;
justify-content:center;
margin-bottom: 110px;
.imgItem{
margin: 20px 10px 0 10px;
position: relative;
text-decoration: none;
color: #fff;
transition: all .3s;
span{
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
position: absolute;
top: -20%;
left: 50%;
margin-left: -17%;
text-align: center;
width: 34%;
display: none;
transition: all .5s;
opacity: 0;
display: block;
z-index: 9999;
}
}
.imgItem:after{
content: '';
width: 100%;
height: 100%;
background-color: #000;
display: block;
position: absolute;
top: 0;
opacity: 0;
background-image: -moz-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(252,227,138) 0%, rgb(243,129,129) 100%);
}
.imgItem:hover{
box-shadow: 7px 7px 0px 0 $c_blue;
transform: translate(-7px, -7px);
span{
opacity: 1;
top: 40%;
}
&:after{
opacity:0.9;
}
}
}