Pre-load image for hover

Support
#1

Hi I have a few images that are changing on a column hover, but they jump/flicker on the first hover. I have added CSS to preload the image, but it still has the same effect. Is there a different way I should be going about this.

I am using an image element as the original image and this is what I am using to change the image on hover

#rural-column:before .x-image {
  content: url('http://35.201.4.103/wp-content/uploads/2020/07/AOGWRVN-Icon_Rural-Development-51.png');
  display:none;
}
#rural-column:hover .x-image {
  content: url('http://35.201.4.103/wp-content/uploads/2020/07/AOGWRVN-Icon_Rural-Development-51.png');
}
#2

Hi Kelvin,

Thanks for reaching out.
I would suggest you remove that effect from the column background image and add it to an Image element and set the hover image on that. So you need to add an image and hover effect image to that specific image.

Alternatively, you can use the Creative CTA and set these two images as Primary Graphics image and Interactive Primary Graphics Image. Please find the video describing the settings.
https://www.awesomescreenshot.com/video/1594938?key=850ab965a41457955e868a274c4d7fe7

Hope it helps.
Thanks

#3

Thanks @tristup,

If my understanding is correct you are saying the issue is, because I have a hover over the entire column I am getting a delay in the transition?

The first two columns on my page I changed to have a column background and the last two I have an image element. The column background seems to have a smoother transition, but it still has a delay.

If I use Creative CTA my image won’t change if I hover over the text, is that correct?

#4

Hello Kelvin,

Be advised that the column background and the use of the image element in the column are completely different setup. The column background will give you a smoother transition because it is a background image. The slight delay will be subtle compared to the image element which is quite noticeable. The file size of the image also contributes to the delay of the display of the image.

Yes, if you use the Creative CTA, the image will not change. Could you please send us the URL where you have applied the column background so that we take a closer look?

Thank you.

#5

Thanks @ruenel

the URL is - http://35.201.4.103

Screen Shot 2020-11-05 at 11.28.16
Screen Shot 2020-11-05 at 11.28.162880×884 507 KB

#6

Hello Kelvin,

I have inspected your site and I found out that you are referencing the wrong elements and used the incorrect CSS property. You should be using the background-image CSS property. Your background container should not be .x-bg. It should be the background layer lower image container.

Screen Shot 2020-11-05 at 12.41.01 PM
Screen Shot 2020-11-05 at 12.41.01 PM1442×452 79.9 KB

Therefore, the final code should only be:

#column-ID:hover .x-bg .x-bg-layer-lower-image{
    background-image: url('http://example.com/image.jpg') !important;
}

The !important is needed to force the CSS to be applied to the element since the default background image was applied as an inline element CSS. Be advised that the code above does not work out of the box. It only serves as an example for you to get you started with your customization. Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Best Regards.

#7

Thanks @ruenel

Definitely works better with .x-bg-layer-lower-image but adds the hover image over the background image.

Thanks

#8

You are most welcome Kelvin!
By the way, I’ve noticed that you added a custom JS code on the page. You have added this:

jQuery("#rural-column").wrap("<a href='ruraldevelopment'></a>");

Be advised that the “href” value is incorrect and will not work. Please have it updated and use this code instead:

jQuery("#rural-column").wrap("<a href='#ruraldevelopment'></a>");

Best Regards.

#9

Thanks @ruenel,

the href value seems to work on my end, it directs me to the page I want.

Does it not work on your end?

#10

Hello Kelvin,

I am checking the homepage of your site. The link works on my end. Sooner or later as you go in some pages, the link will fail. If your link goes to another page, please use an absolute URL instead. For example, https://example.com/ruraldevelopment/.

jQuery("#rural-column").wrap("<a href='https://example.com/ruraldevelopment/'></a>");

Hope this makes sense.

#11

OK great, thanks heaps @ruenel I will update my links.

#12

You are most welcome!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.