Basic hover interaction animations highlight

Design help Animations & Interactions
1

I am trying to replicate the results from the tutorial " Rotation on hover - Webflow interactions and animations tutorial" (https://www.youtube.com/watch?v=4kIVuSx0qAs)

I’m good on the rotate portion of the project. But when it comes to adding the highlight, I’m having no luck.

Now, I am certain that the fact my content is contained within columns may play a role, but I have also tried div blocks and grids, and they all fail just the same.

How the div block is brought into the project (about 3:47 into the video) isn’t making any sense or working for me. I don’t know how to drag in the block and be able to manipulate it the way he does.

Help?

An aside, I would also love to use this effect on the images in my photo album, which was created using this technique: Build a CSS grid-based Instagram gallery — Webflow tutorial Build a grid-based Instagram gallery - Webflow University Documentation

But it seems like the effect is global. Which makes sense to my brain based on how everything is built. But is there a way around it? At 6:49 in the tutorial, it sure seems like it might be possible.

Here is my public share link: [LINK][1]
([how to access public share link][2])

https://preview.webflow.com/preview/realvuecda?utm_medium=preview_link&utm_source=designer&utm_content=realvuecda&preview=305e26a63db345c43ce431220a1486b1&pageId=659068bf5ef9355acc68ee98&workflow=preview

2

hi @jw83876 what I see in your project is not exactly what he is saying. Your highlight element (you can give it different class name not to confuse your self) that is a wrapper for image and highlight have to have position: relative overflow: hidden (as mentioned in video) and place your div inside (beside your img) and give it position: absolute top:0 left:0 so you can follow video then

CleanShot 2023-12-31 at 09.00.14

3

Yes… since posting this I found another tutorial online… annoying, hard to follow and sounds like a rave; but I do feel like at times the webflow tutorials can gloss over small details that are pretty critical to success.

I got it to the point that there is a highlight, but it’s not moving right, very jerky and not smooth.

I’m going to try starting from scratch and see if I can do better this time. Sometimes I find that is a good approach. We shall see.