Hi,
I’m using av-layout-grid-container.
I want to chnage the img on hover.
So I did the following:
1. .image-overlay-inside, .image-overlay.overlay-type-extern { display: none !important; }
2. #my-grid-row .avia-builder-el-1 img:hover { content: url(‘NEW-IMG-PATH’) !important; }
It’s working, but…
It seems to load the NEW-IMG on the first time I hover the img, and it blinks. after it’s fine.
Can I somehow, load the hover img before to prevent it from blinking?
Tnx.
Hi,
Can you post the link to your website please?
Regards,
Josue
This site uses the URL to the old site.
To reach the new site I edited the IP in my HOSTS file.
If you want to do the same:
185.56.75.150 orit-design.co.il
185.56.75.150 http://www.orit-design.co.il
Tnx.
Hey!
I see, i believe this happens because you’re technically creating a new (pseudo) element on hover so the browser loads it at that ppoint, your could background instead
#my-grid-row .avia-builder-el-1 img:hover { background: url(‘NEW-IMG-PATH’) !important; }
If that doesn’t work another thing you can try is, include a section and fill it with all the hover images in any order and hide it with CSS, that way the images will be pre-loaded.
Cheers!
Josue