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

Ask the community
1

I would like to add a simple zoom effect when I hoover over an image. How can I do that?

Thank you

2

Hello and Happy Holidays –despite this crazy year–; just an amateur former wix user here happy 2 help / shed some light.

As far as I recall, you can manually achieve what you’re describing only with images in the Wix Pro Gallery . You can add a gallery from either the Wix App Market or directly from the EditorX’s Add Panel in “+ > MEDIA > Pro Galleries”.

Then you can select your gallery and open the Settings, in which you’ll be able to achieve the zoom effect for each hovered image in the next adress:
“Design > Item Style > Hover effects” and make sure to select ‘Zoom in’.

408×584 15.7 KB

This is useful if you want to achieve this effect with several images in the same page and section, hence a gallery can satisfy this. For a live example, you can visit https://bonusensamble.wix.com/musica/video and hover on the gallery images.
Notice that the hovered image will only zoom within a frame instead of resizing (increasing its size (which in my opinion is cooler (looks neater))) and the zooming effect is animated. You can also set a transparent overlay color simultaneously.

I’m afraid it isn’t possible yet* to manually** add this same effects on hover to isolated image items on the site’s pages. However, hope it helps :slight_smile:

  • Interactive effects on click or hover are apparently among the upcoming features that the EditorX Team members are working on to release in a near future, according to the Coming Soon page (see ‘Interactions’); so if you’d prefer to be a little more patient, you could perhaps soon manually achieve what you’re looking for.

** Hover Effects & some other animations are seemingly already possible in both Wix & EditorX using the Wix Velo (turning on DevMode) through some #coding. You may want to read a bit about the Wix Code API ; you may need to use the .onMouseIn and .onMouseOut events; or, if the images can fit in a repeater, you could follow this tutorial posted by @ajithkrr in the Velo’s Forum .

3

You can achieve this with Velo with very simple code.
Here is an example:

You can learn more about wixAnimation, here .

Happy new year!

4

Thanks!

This is exactly what I was looking for. Can I add multiple images at a time with this code?

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();
        });
    })
}
6

couldn’t get this to work on my site. Is there anything I need to adjust?

7

at this point we have hover and click interactions released, here is the example and Academy Lesson you can refer to:

8

Adding to that if you put it in a container with overflow set to Hide , it will look similar to zooming in.