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