Awaiting an answer SP Page Builder

How to "Rollover image" Replace an image with another one on hover/ mouse over?

Asked by Thierry Beyeler 4 years ago Last activity 4 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.

2 replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
4 years ago

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(http://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

Thierry Beyeler Asked this
4 years ago

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

Log in to reply.