Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Anchor with absolutely positioned element causes the background image to move

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #161679
    aaron118
    Participant

    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

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.