How To "Rollover Image" Replace An Image With Another One On Hover/ Mouse Over? - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

How To "Rollover Image" Replace An Image With Another One On Hover/ Mouse Over?

TB

Thierry Beyeler

SP Page Builder 3 years ago

Could it be possible to use the add-on; "image overlay" ? That would be actually the best. As long as it replaces completely the first picture with the second one when the mouse roll over it.

0
2 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 years ago #49928

Hi there!

Thanks for your query.

There is no default way to do that. But you can try the following steps.

Please add a css class name in your image overlay addon as follows: https://prnt.sc/25gwcoh

Here is the sample code you need to use in your custom CSS:

 .sppb-addon-overlay-image.test:hover .overlay-background-image {
    background-image: url(localhost/helixultimate_quickstart_j3_v1.1.1new/images/2021/05/31/home2.jpg)!important;
}

Please use your own image url in the above code. And the 'test' within the code represents the CSS class of your Image Overlay addon. https://prnt.sc/25gxsxn

Note: Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Hope this helps!

Best Regards

1
TB
Thierry Beyeler
Accepted Answer
3 years ago #50565

Thanks a lot Rashida, you are an angel, your codes works very well ! :-)

0