I am experiencing an issue with a responsive image that has a hover transition. Everything works well when the image is at 100% width, but in Firefox version 21, when the browser window is resized causing the image to shrink and then hovering over it, there is a slight upward shift of the background image at certain sizes. This shift is very small and not consistent across all widths.
A screenshot showing the two states (light area without hover and dark area with hover) below. The bug is most noticeable at point 'x'. It only occurs at specific widths and is minimal but still noticeable.
I have tested this behavior in IE and Chrome, and they do not exhibit the same problem. Therefore, it seems to be specific to Firefox. It appears as if Firefox is resizing the image to be 1px less in height. Does anyone know why this is happening and how to resolve it? (Link to jsfiddle provided for reference)
HTML
<body>
<figure>
<h2><a href="#">Title</a></h2>
<a href="#"><img src="http://placehold.it/500x450" /></a>
</figure>
</body>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html, body {
width: 100%;
font-size: 100%;
}
/*========================================
============== CENTER IMAGES =============
========================================*/
body {
text-align: center;
}
/*========================================
=========== RESPONSIVE IMAGES ============
========================================*/
figure,
figure > a,
img {
max-width: 100%;
}
/*========================================
============ GENERAL STYLING =============
========================================*/
figure h2 {
text-align: center;
font-style: italic;
font-size: 1.75rem; /* 16 x 1.75 = 28px */
font-weight: normal;
}
figure h2 a {
text-decoration: none;
color: black;
}
/*========================================
============ HOVER TRANSITION ============
========================================*/
figure {
padding: 1rem 1rem 2rem;
position: relative;
display: inline-block;
}
figure h2 {
margin: -1rem 0 0 -1rem; /* offset the figure padding */
z-index: 2;
position: absolute;
line-height: 0;
width: 100%;
top: 50%;
}
figure h2 a {
z-index: 1;
color: rgba(255,255,255,0);
-webkit-transition: color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out;
transition: color 0.3s ease-in-out;
}
figure:hover h2 a {
color: rgba(255,255,255,1);
}
figure > a {
display: inline-block;
line-height: 0;
background: black;
box-shadow: 0 2px 5px black;
}
img {
opacity: 1;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
figure:hover img {
opacity: 0.5;
}