How to do this effect in wix

Ask the community
, ,
1

Question:
Is it possible to create a hover effect where text fades in and images move smoothly without using code in Wix?

Product:
Wix Editor (Classic)

image
image1920Ă—953 69.7 KB

What are you trying to achieve:
I want to create a section where, upon hovering over an image:

  1. The image and its corresponding title text move smoothly upwards.
  2. A hidden text fades in smoothly below the image.
  3. The hover area should include a radius that extends beyond the image itself, covering the area of the hidden text.
  4. When the mouse moves out of this area, everything reverts to its original state with the same smooth transition.

This effect should apply to two separate image/text combinations in the same section, and each pair behaves independently.

What have you already tried:

  1. Grouping elements (images and texts) using the Wix container box to apply animations.
  2. Using hidden and collapsed properties for the text, but couldn’t achieve smooth transitions.
  3. Looking through Wix’s built-in animation effects but couldn’t find a way to make the text fade in or the image/title move as described.
  4. Attempted to use the interactive hover box but couldn’t configure it to match my desired behavior.

Additional information:

  • IDs of the elements in question:
    • Image 1: image9, Text Title 1: chiffon, Hidden Text 1: text169.
    • Image 2: image8, Text Title 2: cheesecake, Hidden Text 2: text170.
  • The hover effect I want should look professional and smooth, similar to a custom-coded animation.

The picture i attached is the example of what i want

If this is not possible without code, please let me know if there’s a workaround within the Wix Editor. Thanks in advance!

3

yeah ı just noticed i may be able to do that wıthout usıng any code (Im new to wix so it takes time for me to familiar with everything). now what ım trying to do is using container box because it has hover interaction. i dont know if its a good choice tho

4

but is it possible to make the following image to move upward when being hovered?

image
image1920Ă—848 61.6 KB

image
image1920Ă—868 64.3 KB

The fırst ımage ıs before beıng hovered and the second ımage ıs when ı hover the cake part

5

Hi, ammarjagadhita !!

In conclusion, I believe that this functionality can be achieved using Wix’s standard editor. Click on the target container or element, and you should see an icon resembling a lightning bolt labeled “Add Hover Interaction.” Click on it, then edit the hover state. Ensure that the tab is set to “Hover,” and drag the target element upward. If a vertical line appears indicating the distance you want the element to move, you’ve successfully set the movement. This means you’ve configured the element to move from one point to another on hover. Publish your site or create a test site to verify the functionality! :wink: :raised_hands:

1 Like