Despite referencing this specific discussion thread, I still couldn't resolve the issue in my case (unless I placed the suggested code incorrectly).
Essentially, when hovering over a link in Firefox, some images underneath shift by 1px (not all of them, so you might need to experiment to see it). Additionally, Chrome blurs all the images on top of that.
Feel free to take a look at my Codepen example.
The problem disappears once I remove:
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
Is there a way to fix this without removing that particular line?
Here's the full code provided below:
HTML
<div class="main">
<div class="hover_img animated fadeInUp">
<a class="hover_link" href="work/sensory/">Sensory Possibilities<span>
<img src="http://witch-house.com/NEW/sensory.png"/></span></a>
/
<a class="hover_link" href="work/designing/">Designing Humans<span>
<img src="http://witch-house.com/NEW/deshum.png"/></span></a>
/
<a class="hover_link" href="work/daggerforest/">Dagger Forest<span>
<img src="http://witch-house.com/NEW/dagger.jpg"/></span></a>
/
<a class="hover_link" href="work/wavelength/">Wavelength<span>
<img src="http://witch-house.com/NEW/dagger.jpg" class="img4"></span></a>
/
<a class="hover_link" href="work/talescrypt/">Tales From The Crypt<span>
<img src="http://witch-house.com/NEW/tftc.jpg"/></span></a>
/
<a class="hover_link" href="work/dnahackers/">DNA Hackers<span>
<img src="http://witch-house.com/NEW/dnahx.jpg"/></span></a>
/
<a class="hover_link" href="work/robots/" >Do Graphic Designers Need To Be Human?<span>
<img src="http://witch-house.com/NEW/robots.jpg"/></span></a>
</div>
</div>
</div>
and CSS:
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 54%;
font-size: 2.5vw;
line-height: 2.8vw;
font-family: 'Raleway';
text-transform: uppercase;
font-weight:200;
margin: 0 auto;
}
.hover_link {
color: #d2d2d2;
font-family: 'Rubik';
text-transform: uppercase;
font-weight:900;
}
.hover_link:hover {
text-decoration: none;
color: #4b2de5;
}
/* PROJECTS IMAGES */
.hover_img span {
pointer-events: none;
z-index:-1;
opacity: 0;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}
.hover_img a:hover span {
display: inline-block;
opacity: 1;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a { text-decoration:none; }
img { width: 40vw; }