Show pic behind the button when mouseover (solved)

Hi guys.
I know nothing about coding yet but im in charge of making a new homepage for our small business. Our site does not follow the standard design as you choose on the starting page to which part of the site you want to go and then its like separate websites.

So we have 3 options (Buttons) to choose from on the starting page and i would like to make an image appear in the background when you mouseover the buttons. Is there an easy solution to this?
example:

See the Change Site Content example. All you need to do is to use the mouseIn and mouseOut event handlers instead of the onClick as used in the example. This should give you a good start.

Thank you thats already very helpful. So i came up with this and set the bg pictures to hide when the page loads, but it does not work in the preview: nothing happens when i mouseover the buttons (group3). What did i do wrong?

export function group3_mouseIn(event) {
$w(‘#image5’).show();
}

export function group3_mouseOut(event) {
$w(‘#image5’).hide();
}

@it84626 It could be lots of things. Did you connect the mouse event handlers to the buttons? Try using console.log() messages to see if your event handlers are triggered.

@yisrael-wix that was it, they were not connected. im not sure if it has to do with the groups (doesnt seem to be possible to assign events to them) but i just used the button (inside the group) itself and now it works fine, thank you so much for your help!