Hi everyone,
I need to create a product page, and I’d like to know which is the best way to create an effect like on the film covers of netflix, that on Hover the cover gets darker, but instead of the “play” icon, add some text (product name).
Ideally, the darkening filter should appear with slide effect over the product image.
Also, I’d like to design it in a responsive way so in computers displays 4 products on each line, in tablets shows 3, etc.
Thank you!
Hey,
check this wonderful site (by the way, there are tons of docs and tuts made by the webflow team).
Just play with the interactions by your own and it ll be easy.
See example 5:
Webflow Interactions
or this Thread here:
Interaction Demos
Thanks @Daniel_Schultheiss
That’s exactly what I need but repeated on several products.
The problem is I’ve been trying different combinations of divs, blocks, containers, rows, etc and I can’t figure out the best way to build it.
I don’t know where should I place the album cover, the icons, the album description, and if I should position them relative, absolute, etc.
would you mind pasting your public link to the current website status?
My bad, that is not the public link.
How to generate the public link is shown here:
How to Enable a Webflow Public Link
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”.
Click done.
Start in Preview Mode and check if everything is working.
Now you can freely change every behaviour as you like.
Beware:
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 :).
Thaaaaaaank you very very very much @Daniel_Schultheiss
That was exactly what I needed, and you explanation is completely awesome.
Without you help I would have spent hours and hours trying and finally give up.
Glad that I could help. You’re welcome.
Cheers