Transition makes image shift 1px - css

Question

I've seen this thread but it doesn't work for me. (unless I was pasting suggested code in wrong place)
Basically, in Firefox, when hovering a link, the image under shifts 1px (only some of them, so please play around to catch it). Chrome, on top of that, blurs all images.
See my Codepen
When I delete
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
the problem disappears.
Is there a way to make it work without losing that line?
Full code:
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; }

Answer 1

try with this 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 {
z-index: -1;
opacity: 0;
display: inline-block;
transition: opacity .3s ease-in-out;
position: fixed;
width: 100%;
text-align: center;
top: -50%;
left: 0;
}
.hover_img a:hover span {
opacity: 1;
}
a { text-decoration:none; }
img { width: 60%; margin: 0 auto;}

Answer 2

and changing the way we insert the image in the html in this way
<div class="main">
<div class="hover_img animated fadeInUp">
<a class="hover_link" href="work/sensory/">Sensory Possibilities
<span style="background-image: url(http://witch-house.com/NEW/sensory.png)" />
</span></a>
/
<a class="hover_link" href="work/designing/">Designing Humans
<span style="background-image: url(http://witch-house.com/NEW/deshum.png)" />
</span></a>
/
<a class="hover_link" href="work/daggerforest/">Dagger Forest
<span style="background-image: url(http://witch-house.com/NEW/dagger.jpg)" />
</span></a>
/
<a class="hover_link" href="work/wavelength/">Wavelength
<span style="background-image: url(http://witch-house.com/NEW/dagger.jpg)" />
</span></a>
/
<a class="hover_link" href="work/talescrypt/">Tales From The Crypt
<span style="background-image: url(http://witch-house.com/NEW/tftc.jpg)" />
</span></a>
/
<a class="hover_link" href="work/dnahackers/">DNA Hackers
<span style="background-image: url(http://witch-house.com/NEW/dnahx.jpg)"/>
</span></a>
/
<a class="hover_link" href="work/robots/" >Do Graphic Designers Need To Be Human?
<span style="background-image: url(http://witch-house.com/NEW/robots.jpg)"/>
</span></a>
</div>
</div>
</div>
and the 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 {
z-index: -1;
opacity: 0;
display: inline-block;
transition: opacity .3s ease-in-out;
position: fixed;
width: 100%;
text-align: center;
left: 0;
top: -50%;
height: 200%;
background-position: center;
background-size: auto 100%;
background-repeat: no-repeat;
}
.hover_img a:hover span {
opacity: 1;
}
a { text-decoration:none; }
img { width: 60%; margin: 0 auto;}