I would like to recreate the roller effect you can see on the link below. It’s the first blue box roll over I want to create. I initially designed this in Adobe Muse and now need to redesign the site.
The rollover your talking about is pretty easy to reproduce within webflow.
Even if I would have done my layout using flexbox instead of inline blocks here is one way to achieve it.
Wrap your image into a div block (“roll over position”)
Set this “roll over position” div to position relative (useful for children absolut position)
Add a div block inside this “roll over position” just after the image itself (“roll over content”)
Set the “roll over content” to position absolute and pin it to 4 sides
Set the transform Y property of the “roll over content” to 100%
Set the “image box” overflow property to hidden
Structure should look like this
Now you can use the transform property of the “roll over position” transform Y from 100% to 0% to set up interactions on hover on and hover out.
To illustrate further this technique you can watch a video tutorial I made for custom slider. It covers the same technique and I use it in almost all my projects so far. Very flexible
First your “roll over position” should be inside the Image box (which serve as a mask)
You should then set the hover interaction on the image box instead of the roll over position (this last one move so it can become a bit jumpy if it is used as a trigger)
In your interaction setting target the class image box and, inside of the animation, you can affect the children with this class.
I would recommend as well setting up an initial state in the roll over animation to avoid unexpected behaviour.
Here are some screenshots of the styles which should be applied.
You have a lot of unnecessary style properties setup. (meaning they don’t really have an effect)
I also replaced the margin with some padding on the link block, if you want to keep and area between the link block you will need an extra div wrapper to apply the padding.
Other than that when all the styles match mine, you just have to set the width of the link block in % for each break point. 33.3333 = 3 per line, 50% = 2 per line, 25% = 4 per line etc.
Thank you so much for your help, it now works perfectly. I only wish I understood what I have done more. But that will just come with time I guess. Thanks again.