Hover Box Help

Ask the community
,
1

Greetings,
I have been using hover boxes to underline words and zoom in on pictures. You can see what I mean on the main page of my site: https://www.jackachenbach.com/ .

I’m a little annoyed because I want the hover effect to run smoothly but it is very jumpy.

Does anyone have any tips?

2

If you want to carry on using the animations provided through Wix Editor, then you will need to contact Wix Support about your issue.
https://support.wix.com/en/about-wix/contacting-wix-support

Try using code and using onMouseIn and onMouseOut.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut

Have a look at this tutorial here that shows you how to apply this function.
https://www.wix.com/corvid/example/hide-and-show-elements

You can also use code for your effect options too.
https://www.wix.com/corvid/reference/$w.EffectOptions.html

However note that this won’t work on mobile so you will either have to not use it on mobile or use Wix Window form factor function to write mobile only code.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only

3

Thank you. I got it working using the links you provided. I want to also use mouseIn to slightly zoom in on a picture / zoom out on mouseOut. Do you have a link referencing this coding? Unfortunately, I have found that using the hover box is cumbersome and has a delayed function compared to coding.

4

@jackachenbach

Have a look at the zoom option in the effects options.
https://www.wix.com/corvid/reference/$w.EffectOptions.html

5

@givemeawhisky Thank you for your help! Using what I learned from getting the previous mouseOver code to work I tried applying it here. However, it does not work. Maybe I’m missing something?

$w.onReady( function () {
zoomOptions();
});

function zoomOptions() {
let image1 = {
“duration”: 10,
“delay”: 0
};

$w(“#image1”).show(“zoom”, zoomOptions);
}

export function image1_mouseIn(event) {
let image1 = $w(“#image1”);
zoomOptions();
}