Image Hover Effect - Zoom In

Ask the community
1

Hello.
Does anyone know how to make the Hover Effect “Zoom In” on a photo? If I create a Pro Gallery I can get this effect. But it doesn’t work in an image. Clicking on Animations and Effects - Hover (no “Zoom In” option)

I’m using Wix Studio editor.

Thanks in advance!

2

Use code

https://dev.wix.com/docs/velo/api-reference/wix-animations-frontend/introduction

import { timeline } from "wix-animations-frontend";

$w.onReady(() => {
  const zoomTimeline = timeline()
    .add($w("#image1"), {
      duration: 1000,
       scale: 1.8,
      easing: "easeOutBack",
    })
    

  $w("#image1").onMouseIn(() => {
    zoomTimeline.play();
  });

  $w("#image1").onMouseOut(() => {
    zoomTimeline.reverse();
  });
});
3

@Mark_Hunte Thanks for the help, but I wanted the image to remain the same size. just zoom in when hovering the mouse but keeping the image size.

4

Just realised what you mean,

If you are in Wix Studio. iyou can place the image inside a Container and then set the containers overflow to hidden.

I do not think you can do this in Wix Editor. ( Really annoying the Editor does not have this basic stuff)