Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Jean-Pierre Sanchez
Dec 31, 2020

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

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


Thank you

2 answers2 replies
3
Matanya
Dec 31, 2020

You can achieve this with Corvid with very simple code.

Here is an example:


You can learn more about wixAnimation, here. Happy new year!

Jean-Pierre Sanchez
Dec 31, 2020

Thanks!


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

Matanya
Jan 03Edited: Jan 03

@Jean-Pierre Sanchez 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();
        });
    })
}

1
Ricardo Herrera
Dec 31, 2020Edited: Dec 31, 2020

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'.


(heh sorry mine's in Spanish) ':v

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 :)


* 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 Corvid (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 @Ajit Kumar in the Corvid's Forum.

Editor X

Design your boldest creations.