I have a hover effect on some images. In order to save some lines of code, I made it with ::before pseudo-element.
the problem is that looks different on chrome then it looks on Edge and Mozilla and I don’t know how I could fix one without messing up the other.
Here is the site:
And here is the code:
[code]
.card::before {
content: ‘CLICK ME!’url(‘img/Clicked svg.svg’);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
display: flex;
justify-content: center;
align-items: center;
font-weight: 800;
color: white;
opacity: 0;
transition: all 200ms ease;
}
.card:hover::before {
opacity: 1
}