Background shift/distortion when hover over a PNG image

Question

This is a problem I'm having in Chrome. It does not happen in Firefox. I will provide CSS, HTML, and Jquery Examples at the bottom.

The problem: When I hover over a PNG (which happens to be in a carousel jquery plugin right now), a hover image replaces the initial PNG. It even happens when I drag an element with Jquery's drag and drop functionality. It works without any problems, but the background slightly shifts or becomes distorted for just a second when it happens. It's not a great user experience, and I was wondering if someone knew how to fix it. Let me know what code you need to look at.

Code Examples

HTML:

<li id="img-home"><img id="img-home-src" src="<?php echo base_url();?>files/assets/images/homepage/img.png" alt="" /></li>

CSS:

li {
    text-align: center;
    cursor: pointer;
}

#img-home
{
    border:0;
    width:386px;
    height:484px;
    overflow:hidden;
    display: inline-block;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

#img-home-src
{
    padding: 0 0 0 0;
    margin: 0 0 0 0;border:0;

}

Jquery:

       $("#img-home").hover(
    function () {
          $("#img-home-src").attr("src","<?php echo base_url();?>files/assets/images/homepage/img_hover.png");
    }, 
    function () {
          $("#img-home-src").attr("src","<?php echo base_url();?>files/assets/images/homepage/img.png");
    }
  );

Answer 1

I think (as previous answers mention) that this is a cache/loading issue. The simple fix is to set a background-image via CSS on it so that it preloads the image:

Demo: http://jsfiddle.net/SO_AMK/cgMxe/4/

HTML (CSS Declared inline so that you can still use PHP easily):

<li id="img-home">
    <img id="img-home-src" src="http://dummyimage.com/386x484/000/0011ff&text=Test+Image" style="background-image: url(<?php echo base_url();?>files/assets/images/homepage/img_hover.png);" alt="" />
</li>​

CSS: Same

jQuery: Same

Answer 2

Do you really need to use jQuery to toggle images on hover?
It is rather heavy solution, which also create problems with cache, because new image starts to download only on hover action.

You can use pure css to achieve your goal (improve user experience) with sprite technique, which decrease time of downloading additional images to zero, because each image for each state (hover, active) of combined in one small image, which loaded instantly:

Demo on dabblet

#img {
    width: 300px;
    height: 150px;
    background: url('//placekitten.com/g/300') no-repeat; 
}

#img:hover { background-position: 0 100%; }

Read more about sprites:

• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Answer 3

img elements are natively inline-block, so that declaration isn't needed. If you're not using a CSS reset, check out Eric Meyer's reset as a reference. It will help nullify rendering differences between browsers.

There are legitimate reasons to load images inline rather than as a CSS background - so have at it.

**HTML**
<img src="img1" class="over">
<img src="img2" class="out">

**CSS**
@import url (reset.css);

img.over, img.out { position:absolute; z-index:2; }
img.out { z-index:1; }

**jQuery**
$('.over').mouseover(
    function() {
        $(this).next('img').css('z-index',3);
    }
);
$('.out').mouseout(
    function() {
        $(this).css('z-index',2);
        $(this).prev('img').css('z-index',3);
    }
);

I'm using mouseover/out instead of hover because once the top image is hidden or pushed the bottom of the stack, the browser interprets it as hover:out (so it becomes a blinking element).

HTH

Answer 4

That code seems legit to me. I can't put this in comments above, so it's just opinion, not answer. Maybe that happens because first image is loaded in same time when page is loaded, and secon is loaded on demand. Between hover function and full downloading image from server, background is shifted for a second. Try to call that second image somewhere on page, right on top, and give to her display:hidden or something like that. Point is to load image that will be saved in cash and used when hover function is called.

Answer 5

Unfortunately, I didn't explore the issue enough to pin point precisely what the cause was, but I found the problem. I didn't mention some other parts of the code to you all because I didn't know it was the reason for the problem. So, apologizes are necessary on this one.

The culprit was the background image of the page. Here's what the CSS read:

.background {
    background:url(../images/background/5.jpg) no-repeat;
    background-size:100% auto;
    -moz-background-size: 100% auto;         /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% auto;           /* Opera 9.5 */
    -webkit-background-size: 100% auto;      /* Safari 3.0 */
    margin:0;
    padding:0;
    opacity: 1;
    height: 100%;
    position:absolute;
    width:100% !important;
    z-index:-2000;
    left:0;
    top:0;
}

All of that code works fine in Firefox, and the other browsers, but not in Chrome. The reason there is problems in chrome is the background-size:100% auto; line. To get around this, I did this:

HTML: <img src="5.jpg" class="bg" />

CSS:

.bg {
    width:100%;
    margin:0;padding:0;border:0;
    height: auto;
    min-width:960px;
    z-index:-2000;
    position:absolute;
}

Voila. No distortion issue, in either drag and drop, and hover events.