Streaming live at 10am (PST)

Hover On/Off Overlay Help

Hello!

I am trying to create a solid overlay hover effect that starts at the bottom left corner of the image, and then covers the image. On hover out, I want it to return to the bottom left corner, unseen. I have the effect I want, I just don’t understand why it isn’t clip masked to the divblock/image, but instead it starts off to the side and ends off to the side, while still visible.

Thank you!


Here is my site Read-Only: [[LINK]1
(how to share your site Read-Only link)

@mjcensullo, to start off with your interactions, especially if you don’t want them to be seen at first you need to add a Hide/Show filter. When you add them to the 1st/2nd clicks then you will get the interaction you want.

I am attaching a little video for you.

CloudApp

Sorry about the audio issue. Its on my end and have been having issues as of late. If you need me to redo the video, please let me know.

@WebDev_Brandon This is super helpful, thank you! Video & sound worked perfectly! I didn’t know of the hide/show actions so thank you for showing me how that works. That is definitely closer to what I am trying to achieve, but it’s still visible as it comes and goes on that left side.

I want it to crop the boundaries of the link box essentially. So as it comes in further and further, more is viewable. And as it goes out, the second it hits the left & bottom sides, those portions crop out until it’s all the way down.

I think I’m just having difficulty trying to convey what I’m trying to do with words :joy:

Thanks again!

Oh ok i get u! Yeah I’m not sure how that will be down. Have to think about it more!

It also might require some custom code to make what ur asking happen.

I’ll think about it tonight.

No problem at all and also no rush! In the meantime I’m going to take a look around to see if I can find a similar effect to show as an example. The idea is that I want to use it for my portfolio, and when you hover over the items, an overlay pops up and then the project title, category, and a read more link. Thx again!

Hi @mjcensullo, have you been able to figure this out yet? Or at the very least find an example of what you are trying to do?

I have been reading and rereading your notes, and I am still having a hard time trying to figure out your process?

Would you be able to sketch it out or maybe break it down more? I only see a box and an ‘H-tag’.

Hey @WebDev_Brandon, unfortunately not yet. Of course it’s tough to find an example when you’re actually looking for it lol. I attached photo of a sketch I made quickly to show initial state, middle of the hover state, and then the end state. I just want the div block overlay to come up from the bottom, but for it to only be view-able when it’s onto of the image.

This is sort of what I am looking for, but instead of the overlay box growing from the center in this example, I just want it to slide up essentially.

Another example of the finished state, but without any movement.

I think I just figured it out! See the share link and preview. I believe all I needed to do was turn on “Hide Overflow” on the link block.

I still think the hide/show interaction is very helpful moving forward though!

1 Like

Ok, well I am happy you were able to figure it out.

I was helping another user.

If you need anything else, just lmk.

1 Like

Thank you very much, I appreciate it! Learning more of Weblow everyday.

1 Like