On Wix Studio I’m trying to make a hover effect similar to what’s on this webpage:
Mix With The Masters 
The above example saves a 1000 words, but I’ll try verbally anyway -
I have a repeater showing items of a portfolio from a CMS collection. The mouse-off state should show just the item’s image and it’s title, aligned to the bottom of the image, like in the example above.
On hover, I want a short description paragraph to be revealed beneath the title, pushing the title upwards to make room. The movement is animated.
The paragraph’s length (essentially - it’s hight) varies from item to item (also same as in the example), so the longer the description, the higher the title moves up.
And this is where my problem begins: Since the lengths are different for each item, I don’t know how to relate to that when defining the animation’s start/end states.
The title and the description paragraph are currently stacked vertically, so I can easily place them as I want them to be on the fully-deployed hover-state, by docking the stack to the bottom of the repeater-item. But then how can I tell how much to lower the title to bring all item titles to sit at the same hight when the mouse is off?
I wish the animation section had an option to shift between docking to top and bottom, that way I could dock the stack to the top (with a large margin) when mouse-off and then dock to bottom when hover…
Any ideas how to achieve this effect, in these conditions?
I’ll be extra happy if the description’s animation could also be sightly delayed (again, like the example). The example is really done sooo beautiful and smooth…
Is there a way to code this animation?
If coding is the only way, guidance will be very much appreciated, since I’m very unexperienced with coding, but I am a quick and avid learner.
One thing is for sure - it’s been done on that Mix With The Masters website, so it’s possible ! 
- put the header and lower text in a container with advanced css grid.
- dock to the bottom with a negative
- set a custom animation to move a %
That may work. I might try build it when I have time.
edit: sort of like this
1 Like
You did it !!
Thank you for bothering with the example!
But can you elaborate a little more what you did there?
The instructions are a bit too short and out of context for a noob like me 
To be more specific:
- I applied a CSS grid on the container (2 rows, 1 col)
- Put the title in the top row, docked to it’s bottom. Row height set to fr.
- Put the description in the bottom row, also docked to bottom. Row height is set to min-c.
- When trying to input minus values to the description’s docking, the title follows, as expected. But here I’m encountering the same problem as before - How much space should I set it up for? The paragraphs in each item are a little different from each other.
- Tried to set the docking to -100% (it seems like 100% of the container’s height). All the paragraphs are out of the way, and all the titles are now at the bottom of the container.
- I then tried to animate the Y position of the paragraph using -100%, but this is % of the paragraph’s size, which doesn’t compensate enough to bring it back to be fully shown in the container.
- Another problem - The Y position adjustment in the animation doesn’t seem to influence the CSS grid. That is, it doesn’t seem to recalculate the fr of the top row to be smaller, thus not moving the title along with it, and the texts are just overlapping.
What am I missing / doing wrong ?
This is the layer set up
I set the text container docked to the bottom.
Then in the animation I set the initial states y axis to 75%
Ok I see.
But it’s only working if the description is the same hight across all instances.
Because in the animation section, the translation % relates to the size of the object being animated, not its parent container.
So 75% of the shorter description can’t be the same distance as the long description.
When trying it, the cards with longer descriptions collapses only partially, that is - a little bit of the description is still shown and the title doesn’t go all the way down:
- Notice how the left item isn’t fully collapsed.
- The deployed state looks exactly right, though.
- (screenshots of the mouse-hover are cut and put side by side for demonstration)
I noticed that the same happens in your example as well, only a little less noticeable.
So maybe another approach ?
Also, where are you utilizing the CSS grid, as suggested in your first comment?
Thanks a lot for all your help and effort so far !
maybe put the description in a container and set the height so it is consistant.
looks a bit better using an image like the example you gave
