Unresolved bring image forward on hover question

Ask the community
,
1

Hello, I’m stuck at the same place as this user here:

I just can’t find the required command in order to achieve this. It seems so simple but examples online do not address this issue. Thanks a lot in advance.

2

Hi, Use this coding -

$w.onReady( function () {
// Write your JavaScript here

// To select an element by ID use: $w(“#elementID”)

// Click “Preview” to run your code
});

export function image25_mouseIn(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
$w( “#image25” ).hide();
}

export function image26_mouseOut(event) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
$w( “#image25” ).show();
}

Use whatever your images numbers are (my image number 26 is the larger image in the background. Hope this helps.

3

Thanks but it seems to do nothing. It should show up in the preview mode right? The images just stays still. Tried different variations but to no avail.

4

The code must bring an item to forward on the layer when hovering on it. Maybe a different command is needed?

5

Hi, tried to upload a video for you to see how to do it, but sticks at 99%
Follow the link for video, hope this helps.
https://drive.google.com/file/d/1Fbi14bF1A0U18C01T29FC8jQOvefIegi/view?usp=sharing

6

Finally found the solution using my excel formulation thinking. Copy and paste #image2 which in the example is the phones, make sure you line the two images in line with each other, also, arrange #image2 ‘Send to Back’ and #image3 ‘Bring to Front’.

export function image1_mouseIn(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w( ‘#image1’ ).show();
$w( ‘#image3’ ).hide();
}

export function image1_mouseOut(event) {
// This function was added from the Properties & Events panel. To learn more, visit http://wix.to/UcBnC-4
// Add your code for this event here:
$w( ‘#image3’ ).show();
}

7

That’s brilliant Tom! Thanks a lot. Just a heads up for those looking for a similar solution: Make sure to hide the additional image in mobile editor.