Evens mouseIn&mouseout Hide/Show element issue

My site is:
I need to get it to disappear once you hover it with the mouse. When the mouse is not on the picture, the picture should be displayed on the page.
I added wix code to dog picture in home page (#Dog01):
export function Dog01_mouseIn(event) {
export function Dog01_mouseOut(event) {
But after I move the mouse from the picture, the picture does not reappear, should be displayed on the page, please advise.



Hi Tamara ,

In fact, when you mouse in and hide the image, mouse out will not work, because the image is already hidden. So, what you can do is to place a box infront of the image with opacity = 0 so you can see the image through the box, then use mouse in/out for the box to hide/show the image.

Hope this helps!


Thanks Mustafa! Can you help in writing the code please, how does it look in practice?

Hi Tamara,

You can do exactly as Mustafa suggested and keep your code, except changing the element that triggers the event from #Dog01 to the transparent box.

like so

export function box1_mouseIn(event) {
export function box1_mouseOut(event) {

Keep in mind that ‘box1’ is an example for the Transparent Box element id, which you can set in the element’s properties panel

All the best,


Hi Tamara:

You may need to have a transparent second element that exists underneath the dog picture. When you hide an element the mouseout will not fire. You need something else to fire instead. So if you have a circle the same size and call it #noDog and make it transparent you could do something like this:

export function box1_mouseIn(event) {
    .then(() = > {

export function noDog_mouseOut(event) {
    .then(() => {