Image Fading In and Out | WixCreate | Wix Code - Corvid
 

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:

Websites designed by WixCreate that use the above Wix Code:

None

Official Wix Expert & Wix Agency Partner

© 2020 by WIXCreate.com

I  All Rights Reserved  I  info@wixcreate.com  I  202-640-5440

facebook-2.gif