Well there is no “final” or “absolute” solution for your problem, because:
everything is possible. It is up to you.
Normally the corresponding elements are made up like this:
++ Wrapper Div-Element (e.g. called Wrapper)
+++ Div-Element (e.g. called “Overlay”)
++++ Text Element / Icon / Image that is shown after we hover over the container
+++ Div-Element or Image e.g. Album Cover
(if its an image, the hole container will have a height and width that is as large as the image property itself).
Here it is shown within webflow:
The CSS Properties are:
Wrapper is set to Position:Relative, overflow:hidden
The Overlay is set to Position:Absolute with 100% width, positioning is set to “Top” and it is moved by 100% from the top out of the container. So that it is not visible from the start. When you hover, it will come from the bottom.
Its position is then set like this (under the wrapper container):
(If you want it to slide in from the right/left, you have to set its width to 100%, and define another alignment within the absolute positioning. like e.g right, and then define the “right” positioning to -100%.
So after that last example, it will be set to the right of the content wrapper.
But thats just an example. So lets forget it for this explaination.
Then its just a matter of how youve set your basis (is the overlay under, left, right, top of the wrapper) to define the further slide behaviour within the interactions.
Click on the element, that is your wrapper.
Then goto “Assets”
Create a new “Interaction” called “Slide Oberlay on Hover”
Create a new “Trigger” on Hover
Select “Affect different element(s)” and name the “overlay-element” (e.g. “soh-overlay” as it is shown above in the screenshot)…yours is called…whatever you like.
Click “Limit to nested elements” so that if you have this interaction on other elements as well, that only the one slides that you are currently hovering on…and not all.
Define for “hover over” a “move up 100%”
and for “hover out” “move to origin”.
Start in Preview Mode and check if everything is working.
Now you can freely change every behaviour as you like.
If you want different slide animation for different album-covers, then you have to create for every animation a different interaction as well as to define the absolute positioning of the overlay-element.
If this should not solve your question, I completely misunderstood your matter :).