Wix Tutorial - How to fade an image on hover, using Wix Code
This example shows how to fade out an image when hovering over it and how to fade back in the image when moving your mouse away from that area.
To do that the mouse has to be placed in a transparent box since a mousOut event cannot be run on an image that is hidden.
Elements:
Elements:
-
Image: #ImageExample
-
Transparent Box: #BoxExample | Add onMouseOut event in the Properties Panel
Wix Code:
$w.onReady(function () {
$w('#ExampleImage').onMouseIn( (Event) => {
let fadeOptions = {
"duration": 500,
"delay": 500
};
$w("#ExampleImage").hide("fade", fadeOptions);
} );
} );
export function ExampleBox_mouseOut(event) {
let fadeOptions = {
"duration": 500,
"delay": 500
};
$w("#ExampleImage").show("fade", fadeOptions);
}
Demo:
