Change Background Image on Button Hover

Hello everyone – I’m a first time user of Bricks and things have been going pretty smoothly for the most part. This is definitely one of the more intuitive builders I’ve ever had the pleasure of using.

That said, I am stuck on a specific goal of mine. I would like the background image on my page to change when hovering over specific elements. I’m talking the boxes that say flooring (or list flooring services on hover) in my example image. I’d like each box to list a different service, and on hover of the boxes I’d like the background image of the page to change to represent the service.

It’s a bit frustrating because using just HTML and CSS I would know how to do this in an instant – but I am struggling a bit to get it to work with Bricks Builder. My hope is this is something simple that I am stupidly overlooking that somebody can help me solve.

Does anybody have any ideas on how I can achieve my goal?

I found the article below for a different page builder, but I think you could adjust the css etc to work for bricks.

2 Likes

Thank you – I am seeing some progress now! Much appreciated.

1 Like

Hi there! I am trying to achieve what you were planning to but it seems that I am unsuccessful. I’ve entered this for my sections CSS:

root #brxe-gcplex:hover{ background-image: url('https://xxx.co/wp-content/uploads/xxx'); }

But when I hover on my column/block the background image of the block gets changed and not the section. What do I do? Please help.

This gives the perfect answer using built-in interactions

2 Likes

I know it’s too late, but I found this: