Responsive / hover effect strip

Ask the community
,
1

I’m wanting to create a hover effect, with two columns that is responsive to a webpage being resized. I’ve found a previous forum, with an answer detailing the following code, but the code is too complex for my knowledge and I’m wondering if someone could assist / simplify it please.

export function column1_mouseIn(event, $w) {
$w(" #column1 ").background.src = " https://static.wixstatic.com/media/139b4f_7ebaaadd28b44070a8466691b3d5cfcd~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_7ebaaadd28b44070a8466691b3d5cfcd~mv2.png “;
$w(” #box1 “).hide();
$w(” #box2 ").show();
}

let flipOptions = {
“duration”: 600,
“direction”: “right”
};

export function column1_mouseOut(event, $w) {
$w(" #column1 ").background.src = " https://static.wixstatic.com/media/139b4f_2f3f005dc86a427dabb7ac367172fb14~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_2f3f005dc86a427dabb7ac367172fb14~mv2.png “;
$w(” #box1 “).show(“flip”, flipOptions);
$w(” #box2 ").hide();
}

export function column2_mouseIn(event, $w) {
$w(" #column2 ").background.src = " https://static.wixstatic.com/media/139b4f_ca6b89996ef348dcb007cd40c64f9160~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_ca6b89996ef348dcb007cd40c64f9160~mv2.png “;
$w(” #box4 “).hide();
$w(” #box3 ").show();
}

export function column2_mouseOut(event, $w) {
$w(" #column2 ").background.src = " https://static.wixstatic.com/media/139b4f_0f3fb7fba22a494b8af401cdba706750~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_0f3fb7fba22a494b8af401cdba706750~mv2.png “;
$w(” #box4 “).show(“flip”, flipOptions);
$w(” #box3 ").hide();
}

export function column3_mouseIn(event, $w) {
$w(" #column3 ").background.src = " https://static.wixstatic.com/media/139b4f_11ed4d9ee4364c09b63606c54132fad7~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_11ed4d9ee4364c09b63606c54132fad7~mv2.png “;
$w(” #box6 “).hide();
$w(” #box5 ").show();
}

export function column3_mouseOut(event, $w) {
$w(" #column3 ").background.src = " https://static.wixstatic.com/media/139b4f_b6ea78eb09704f4c8eacabd07176ad1c~mv2.png/v1/fill/w_980,h_653,al_c,usm_0.66_1.00_0.01/139b4f_b6ea78eb09704f4c8eacabd07176ad1c~mv2.png “;
$w(” #box6 “).show(“flip”, flipOptions);
$w(” #box5 ").hide();
}

2

Hey @harleyweber
Let me break down the code.

In a page, there is three stripe element ( column1, column2, column3 )

And each column as two box elements inside.
but only one box will show depends if the mouse is inside the column
or outside of the column

So on
mouse In:

  • box 1 will hide and box 2 will show and
    mouse Out:
  • box 1 will show and box 2 will hide.

and During the mouse in and out the background of the columns will also change.

This happens for 3 columns
Each column has one Mouse In and one Mouse out so, total 6 functions

there is an Flip Animation

let flipOptions = {
“duration”: 600,
“direction”: “right”
};

This will animate the box on show or hide
You can see all the available animation here.

3

THIS, is exactly what I needed! Makes so much more sense looking at it this way, than it does via the code itself!

Thank you for this

4

In regards to the background, if I upload an image, which upon hover, I would like it to get darker with text appearing, what would I do?

5

@harleyweber You can add a box with a 10 opacity in black color on top of the image act or you can photoshop a darker image and change the background of the column

6

@salman-hammed Brill. But I didnt think I could actually upload two different images to a strip column? As it doesnt perform like a multi-state box. So I would therefore need to include the link via the code right?