Modification in background when PNG image is hovered upon

Question

Modification in background when PNG image is hovered upon

Having an issue in Chrome that doesn't occur in Firefox. When hovering over a PNG within a carousel plugin or dragging an element with Jquery, the hover image briefly distorts the background. Looking for a solution to improve user experience. Let me know what code you need to see.

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");
    }
  );

css google-chrome hover png

Answer 1

Answer №1

It seems like the issue at hand is related to caching or loading. One way to resolve this is by setting a background-image through CSS to ensure that the image is preloaded:

Check out this demo for reference.

Here's the HTML code with inline CSS for easy PHP integration:

<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>

Keep the CSS and jQuery as they are for consistency.

Answer 2

It seems like the issue at hand is related to caching or loading. One way to resolve this is by setting a background-image through CSS to ensure that the image is preloaded:

Check out this demo for reference.

Here's the HTML code with inline CSS for easy PHP integration:

<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>

Keep the CSS and jQuery as they are for consistency.

Answer 3

Answer №2

Is it necessary to rely on jQuery in order to toggle images when hovering over them?
Using jQuery can be a heavy solution that may cause cache issues, as the new image only starts downloading upon hover action.

An alternative approach is to utilize pure CSS with the sprite technique to enhance user experience. This method reduces the time required to download additional images to zero by combining all image states (such as hover and active) into one small image that loads instantly:

Check out the demo on dabblet

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

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

Learn 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 4

Is it necessary to rely on jQuery in order to toggle images when hovering over them?
Using jQuery can be a heavy solution that may cause cache issues, as the new image only starts downloading upon hover action.

An alternative approach is to utilize pure CSS with the sprite technique to enhance user experience. This method reduces the time required to download additional images to zero by combining all image states (such as hover and active) into one small image that loads instantly:

Check out the demo on dabblet

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

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

Learn 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 5

Answer №3

img elements are naturally set to display as `inline-block`, so there is no need for that declaration. If you haven't reset your CSS, consider using Eric Meyer's CSS reset tool as a guide to standardize rendering across browsers.

There are valid reasons for loading images inline instead of using them as CSS backgrounds, so go ahead and do so if needed.

**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 below in the stack, the browser treats it as hover:out (causing it to blink).

Hope this helps!

Answer 6

img elements are naturally set to display as `inline-block`, so there is no need for that declaration. If you haven't reset your CSS, consider using Eric Meyer's CSS reset tool as a guide to standardize rendering across browsers.

There are valid reasons for loading images inline instead of using them as CSS backgrounds, so go ahead and do so if needed.

**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 below in the stack, the browser treats it as hover:out (causing it to blink).

Hope this helps!

Answer 7

Answer №4

Based on my assessment, the code appears to be valid. Unfortunately, I am unable to include this in the previous comments, so please note that this is simply my opinion rather than an definitive answer. It is possible that the discrepancy occurs because the first image loads simultaneously with the page while the second image is loaded upon demand. There may be a brief shift in the background between activating the hover function and fully loading the image from the server. One potential solution could be to place the second image somewhere on the page, preferably at the top, and apply a display:hidden attribute or similar technique. The objective is to preload the image for caching purposes and utilize it when the hover function is triggered.

Answer 8

Based on my assessment, the code appears to be valid. Unfortunately, I am unable to include this in the previous comments, so please note that this is simply my opinion rather than an definitive answer. It is possible that the discrepancy occurs because the first image loads simultaneously with the page while the second image is loaded upon demand. There may be a brief shift in the background between activating the hover function and fully loading the image from the server. One potential solution could be to place the second image somewhere on the page, preferably at the top, and apply a display:hidden attribute or similar technique. The objective is to preload the image for caching purposes and utilize it when the hover function is triggered.

Answer 9

Answer №5

Regrettably, I failed to thoroughly investigate the problem, but I was able to identify the issue. I omitted some code details because I was unaware they were causing the problem. Therefore, I must apologize for my oversight.

The culprit turned out to be the background image of the page. The CSS code in question looked like this:

.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;
}

While this code functioned correctly in Firefox and other browsers, it caused problems in Chrome due to the background-size:100% auto; line. To address this issue, I made the following adjustments:

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;
}

As a result, there are no more distortion issues during drag and drop or hover events.

Answer 10

Regrettably, I failed to thoroughly investigate the problem, but I was able to identify the issue. I omitted some code details because I was unaware they were causing the problem. Therefore, I must apologize for my oversight.

The culprit turned out to be the background image of the page. The CSS code in question looked like this:

.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;
}

While this code functioned correctly in Firefox and other browsers, it caused problems in Chrome due to the background-size:100% auto; line. To address this issue, I made the following adjustments:

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;
}

As a result, there are no more distortion issues during drag and drop or hover events.

Modification in background when PNG image is hovered upon

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The background color of the columns is overwhelming

Tips for automatically inserting a "read more" link once text exceeds a certain character count

What is the best way to adjust the width of floating divs to completely fill the space they occupy?

Stylish CSS Effects on Hover

Vue-Router functions only on specific routes

Dynamic visual content (map)

Create a sleek 2-column design featuring a bonus scroll bar exclusively using CSS styling

Table with Typewriter Style CSS Animation

Can you please explain the primary distinction between these two identification numbers?

Creating a grid layout with a row of buttons

A collapsible select list with checkboxes for children items

Is there a way to position text to the right of an image?

Issues encountered when using .delay() in conjunction with slideUp()

What could be causing the erratic jumping behavior of the "newsletter sign-up" form within my modal dialog window?

Cannot access mobile navigation due to expanded browser search bar

Click to make the arrow come to life through animation!

Creating a clickable image map for the footer

Problem with z-index in VueJS: Child div z-index not functioning within v-dialog

Animate a div to sense whether it has reached the top or bottom position

Different Positions in Flexbox/Container