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.
@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.
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.
@QA_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
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!
Hey @QA_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.