Slide up roll over

Design help General
1

Hi All

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.

http://test-site.treasuregymnastics.co.uk

Here is a link to the Webflow project so far.

https://preview.webflow.com/preview/treasure-gymnastics-2018?utm_source=treasure-gymnastics-2018&preview=1d8ab8a7d4a14d479432cc640788bf1e

I would appreciate any help I could get please.

Thanks

Jason

2

Hi @jasonjkd,

Adobe Muse let you down… but it is for the best :slight_smile:

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
03

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 :crazy_face:

I hope it helps :slight_smile:

Max

3

Thank you Max That was a really helpful. I have got it working. you can see the link here https://preview.webflow.com/preview/treasure-gymnastics-2018?utm_source=treasure-gymnastics-2018&preview=1d8ab8a7d4a14d479432cc640788bf1e

I have copied and pasted so there is three of them, but when I roll over them they only move the first one. What have I missed :thinking:

4

Hey @jasonjkd,

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.

I join a few screenshots to help :slight_smile:

29
29482×1340 63.5 KB
44
44474×1316 57.5 KB
16
16482×1250 45.7 KB
23
23482×1432 57 KB

Don’t forget to mark as solved if it does the job :crazy_face:

Cheers

5

That is brilliant. Thank you. Just one last thing how do I set the number of squares on each line. Like desktop is 3, tablet 2 and mobile 1. IO had it when I design it in inline. here is the link https://preview.webflow.com/preview/treasure-gymnastics-2018?utm_source=treasure-gymnastics-2018&preview=f6163aaff2e68b06f31644412f14a53e

6

Ok Ok last one :slight_smile:

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)

05
05476×1376 49.9 KB
19
19470×1444 50.6 KB
20
20482×1294 45.2 KB

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.

:wink:

7

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.

1 Like