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:

Fast Food
Wix Code Fade Image on Hover.jpg

Websites designed by WixCreate that use the above Wix Code:

None