Can I create a zoom in effect when hoovering over an image?

Ask the community
5

@jp11
Sure!
Use this code example:

import wixAnimations from 'wix-animations';

$w.onReady(function () {
    addHoverEffectToImages();
});

function addHoverEffectToImages() {
 const images = ['#image02', '#image02', '#image03']; // Enter all the photo ID's here.

    images.forEach(image => {
        $w(image).onMouseIn(() => {
            wixAnimations.timeline()
            .add($w(image), { scale: 1.1, duration: 300 })
            .play();
        });
        $w(image).onMouseOut(() => {
            wixAnimations.timeline()
            .add($w(image), { scale: 1, duration: 300 })
            .play();
        });
    })
}