Has anyone front a way to bring an image to the front on hover?

Ask the community
, , , ,
1

Has anyone found a way to bring an image to the front on hover? I’ve seen people suggest the solution of having the same image hidden on a top layer and shown when hovered using:

$w('#element').onMouseIn
//and
 .hide
.show

but whenever i try this it seems to majorly glitch out, flickering between the two constantly.

Is there a way to be more direct about this or at least fix this flickering error? I’ve tried messing with zIndex in both js and css to no avail. Please help!

Using wix studio coding

2

CSS can do this with z-index. Add/remove customClassList

export function box1_mouseIn(event) {
$w('#image1’).customClassList.add(“tofront”)
}

export function box1_mouseOut(event) {
$w('#image1’).customClassList.remove(“tofront”)
}

CSS
.tofront {
position: relative;
z-index: 100;
}

3

hi I’m sorry I’m very new to coding so this may be user error but when inputting that code into js and css I got the following error:

“An element with the ID ‘undefined’ does not exist on this page. Select or view another element and view or edit its ID in the Properties and Events Panel.”

Here is my exact code in JS:

export function box1_mouseIn(event) {
	$w('#box1’).customClassList.add(“tofront”)
};

export function box1_mouseOut(event) {
	$w('#box1’).customClassList.remove(“tofront”)
};

And then in CSS

.tofront {
position: relative;
z-index: 100;
}

I tried adding a custom class as “box1” and confirmed that the ID is in fact ‘#box1’. Do I need to define it somewhere? Is there some sort of reference I’m missing?

Thanks so much for your help!

4

Double check that your element ID is ‘box1’, then you may have to add event handlers for ‘box1’ (if your hover element is that same as what you want to bring to the front). 2 event handlers, one for onMouseIn and one for onMouseOut. They should display in the right hand column as the image below.

Screenshot 2024-05-14 at 12.50.57 PM
Screenshot 2024-05-14 at 12.50.57 PM1200×469 78.8 KB

5

hi there! Thanks again for your help!

Sadly I’m still getting the same error even when using the event handles vs copy and pasting your code.

Screenshot 2024-05-14 at 1.34.50 PM
Screenshot 2024-05-14 at 1.34.50 PM1386×404 46.4 KB

6

Hi there. Wanted to update that I found a somewhat tedious non-coding solution as follows:

  1. Create an empty container the exact size and placement as the image you want to hover over to reveal your secondary image. Place this as the top layer.
  2. Take the element you want to reveal on hover and place it above your original image but below the empty hover box. So your layer order should be:

-empty hover box
–element to reveal on hover
—original image

  1. On the empty hover box add a hover animation.
    a. Under “Animated Element” select the element to reveal on hover
    b. Select the “Appear” preset.
    You should see the reveal element become checkered and see-through.
  2. Optional to hide original image on the Original image, add a hover animation.
    a. Select the “Custom Tab” and click “Create Custom Animation”
    b. Under the Designing Toolbar ensure you’re set to “Animation 1” and change the opacity to 0%
    c. Under the Designing Toolbar switch from “Animation 1” to “Initial State” and ensure the opacity is set to 100%
    d. If desired use the “Timing” popup to adjust the timing of your animation.
    e. Click done.

You should now have a setup that reveals the new image on hover and hides the original image.

7

Do you not want to try using animation and effects without coding? You can still use the hide and show functions there.

1 Like