I would like to add a simple zoom effect when I hoover over an image. How can I do that?
Thank you
Connect with other creators, share ideas, give feedback and get the latest product updates.
I would like to add a simple zoom effect when I hoover over an image. How can I do that?
Thank you
You can achieve this with Corvid with very simple code.
Here is an example:
You can learn more about wixAnimation, here. Happy new year!
Thanks!
This is exactly what I was looking for. Can I add multiple images at a time with this code?
@Jean-Pierre Sanchez Sure! Use this code example:
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'.
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.