4-Column Strip Hide on Hover

Ask the community
,
1

Hey, guys!
I’m trying to create a full-width 4-column strip with columns that hide on hover to reveal a full-width 4-column strip of the exact same size behind it (Effectively creating editable responsive columns–A feature that should arguably already be a thing). I got fairly close just messing around with different strings of code but can’t quite crack it. I was quoted $250 to have a strip coded with the hide on mouse-over and appear on mouse-out and I’m feeling quite discouraged from this seemingly simple task. Does anyone have any ideas on how I might be able to keep this idea from perishing mere inches from the finish line?

Here’s an example of basically what I’m trying to do:
On load:

2852×1262 916 KB

Mouse-over “INTERIORS” and the column hides to reveal a differently designed column behind it which will be a link to a different page (I can code the link easily so I didn’t feel the need to address that aspect in my plea for help)

2852×1268 771 KB

(The stripes in the header are constantly animated so they look different in each screenshot. Just want to make sure nobody is confused by that or thinks it has something to do with the effect I’m going for)

2

$250 just for the coding for that? Lol

Each column has a background src attribute, so you can upload two images and apply the hover image on mousein. Or you can use a repeater for this and stretch it to width.
https://www.wix.com/corvid/reference/$w.Column.html#background

You can use two text elements one black and one white, or you can just use one and edit its html attribute:
https://www.wix.com/corvid/reference/$w.Text.html#html