How to achieve this hover effect?

Question

I am having trouble finding a way to achieve this effect given that I have to group the image to the text to get it to be linked on the hover effect, which in turn makes the box boundaries for the hover effect too large as they include the borders of the image also. This means the image doesn't only appear when you hover over the text, but rather when your hover anywhere near the boundaries of the text AND the image. Is there any workaround?

Love Games · Accepted Answer

I am not sure how to accomplish this strictly using only the Wix editor, however, this honestly shouldn't be too hard to accomplish via page code (JavaScript). You could easily use onMouseIn() events to change the html of the text to include the underline and change the image src to whatever image you would like to display.You could also apply a fade in and out animation using the show() and hide() methods to make it look a bit more smooth.Below are some of the resources you'll need to get started.https://www.wix.com/velo/reference/$w/texthttps://www.wix.com/velo/reference/$w/text/onmousein https://www.wix.com/velo/reference/$w/text/htmlhttps://www.wix.com/velo/reference/$w/imagehttps://www.wix.com/velo/reference/$w/image/showhttps://www.wix.com/velo/reference/$w/image/hide

Enrique S. · Answer

Thank you so much, I have never written a single line of html of javascript but with your pointers and this https://www.youtube.com/watch?v=aayDBLTKG5c Youtube video I was able to get this effectNow on to endless hours of messing with the parameters to perfect it. Thank you once again.