Anchor with absolutely positioned element causes the background image to move

[Historical Forums User]

I have an anchor tag with an image and an absolutely position span tag which appears on hover. The problem is that when the anchor tag is hovered over and the span is shown, the image in the anchor tag moves slightly in Google Chrome on Mac. Even when the respective image isn’t being hovered over, hovering over another image near can trigger it to move (mainly the images in the bottom left hand corner). All other browsers it works fine.

The HTML is:

<a href="{{link}}">
    <span></span>
    <img src="{{image}}" />
</a>

The CSS is:

#instafeed a {
    width: 33.33333333333333%;
    float: left;
    position: relative;
}

#instafeed a > span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    color: #FFF;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#instafeed a:hover > span {
    opacity: 1;
}

How can I stop the image from moving/resizing in Chrome?

You can see the problem here: http://dev.aaronpitts.ch/cj/ (the photos on the left hand side).

Many thanks

[Author]

Posts