Changing the size of an image onMouseIn

Discussion Ask a question
,
1

Hey there!

I’m looking to increase the size of an image when the curser moves over it so it’s slightly larger, then to decrease back to it’s original size when the curser moves off of it.

I can place code that just shows and hides 2 different images so it’s bigger/smaller but I’m looking to actually change the original image, so that it grows and shrinks rather than just shows the bigger image and hides it when the curser moves away.

Is this possible in Wix code? I can’t find a function to allow me to reference the scale of the object. Below is the code I have already that just shows and hides the different sized objects. ScriptBox is just a transparent box laid ontop of the images. I’m looking to increase the ScriptSmall image to 125% the size it starts as, then decrease to 100% onMouseOut.

export function scriptBox_mouseIn(event, $w) {
//Add your code for this event here:
$w(‘#scriptBig’).show();
$w(‘#scriptSmall’).hide();
}
export function scriptBox_mouseOut(event, $w) {
//Add your code for this event here:
$w(‘#scriptBig’).hide();
$w(‘#scriptSmall’).show();
}

Thanks if anyone can help!

Sam

2

Hi Sam!

Unfortunately you can’t modify the size of components via code (dynamically).
At the moment the way to do it is as you described with show/hide.

Please feel free to post a Feature request in order to make it happen.

Doron.

3

Maybe you can do something like this? And fuss around with the zoom options a little…

let zoom1Options = …
let zoom2Options = …

function zoomInOut() {
let picture = $w(“#myImage”);
picture.hide(“zoom”,zoom1Options).then(() => {
picture.show(“zoom”,zoom2Options);
});
}
export function myImage_mouseIn(event, $w) {
zoomInOut()
}