SOLVED: Change Image on Hover

Ask the community
,
1

Hello guys!

I have One image on my website.
When MOUSEIN, it should fade out and another Image should fade in.
When MOUSEOUT, initial situation should restore.

Can you give advice on the coding? I tried to add the “hide” and “show” options in the coding, but won’t work on the image.

Thanks a lot for your precious advice!

Have a nice day,

Angelo

2

Just look at this page and the video on it and all will be explained.

You simply need to have the two images setup with the one to be shown when the mouse moves over setup as hidden on load.

Then you can simply use the onMouseIn event handler to hide the existing picture with a fade out effect and to show the hidden picture with a fade in effect option.

Obviously, you will need to do a onMouseOut event handler too if you want the images to revert back to the original way.

https://www.wix.com/corvid/reference/$w.EffectOptions.html

https://www.wix.com/corvid/reference/$w.Element.html
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut

https://www.wix.com/corvid/reference/$w.HiddenMixin.html
https://www.wix.com/corvid/reference/$w.HiddenMixin.html#hide
https://www.wix.com/corvid/reference/$w.HiddenMixin.html#show

3

Here’s an example of using a repeater I have hooked up to a dataset.

image1 is under image2, and image 2 is set to “hidden on load”

$w.onReady(function () {
     let fadeOptions = {
         "duration": 250,
         "delay": 0
        };
        
    $w("#repeater1").onItemReady(($item, itemData, index)=>{ 
        
        $item("#image1").onMouseIn((event)=>{
            console.log("mouseIn");
            $item("#image2").show("fade",fadeOptions);
        });
        
        $item("#image2").onMouseOut((event)=>{ 
            console.log("mouseOut");
            $item("#image2").hide("fade",fadeOptions);
        });

    })

});
4

With repeaters, Nayeli (Code Queen) has an excellent tutorial here that you can look at using too.
https://support.totallycodable.com/en/article/create-animation-on-one-repeater-item-at-a-time-using-wix-code