Hover pushes text aside to display image

Ask the community
,
1

Does anyone know how to create a hover effect that would push the remaining text aside to display an image? Here’s an example :

https://static.wixstatic.com/media/a27d24_441621b61efe4900b725cbf705ca535b~mv2.gif(image larger than 4 MB)

2

As far as I know, it not possible with Corvid. Maybe you can do it in an html component, if you find the code somewhere.

3

I actually figured it out! Check out my comment below…

4

Here is my basic version:


I have three texts, Color (“color1”) and POP( “pop1”) and POP ( “pop2”). “pop2” is hidden on load and is triggered on the hover for the Color text which also hides the first pop. The images and buttons are group1 and group 2 and are also triggered with the hide/show on hover. You can use slide effects to get a similar effect as the original. The only difference is that you can’t get back to the original state of just two words with no images once you’ve hovered on one of the triggers.



export function Color1_mouseIn(event) {
 $w('#group1').show();
 $w('#pop1').hide();
 $w('#pop2').show();
 $w('#group2').hide();
}

export function pop2_mouseIn(event) {
    $w('#group1').hide();
    $w('#group2').show();
    $w('#pop1').show();
    $w('#pop2').hide();

}
5

Nice… (I thought that wouldn’t work seamlessly enough. Happy to be wrong)