Multiple stage hover interactions for portfolio thumbnail

[troy]

Hey there everyone
New to Webflow (and CSS really) so please be gentle.
I've spent way too many hours trying to figure this out on my own and failing miserably.

I've been referencing these sites/links but clearly I'm missing something. This first one below (EXAMPLE 5 HOVER REVEAL INTERACTION) would probably help a lot but I can't find any details on how to actually accomplish what is shown. I thought the last link would help get me closer but following along with what he is doing isn't giving me the same results (mostly because he assumes I know more than I clearly do).

I've shared my tests here and included a quick storyboard and comp of what it is I'm trying to accomplish. I know this it a little complicated and I can scale back to what everyone else is doing if I have to but I'd like to try to make this work.

https://preview.webflow.com/preview/orange-site?preview=b435ab8ceb60b599de1b21661ba8a78b

Thanks in advance for any help you can provide.

troy

---

http://interactions.webflow.com/
EXAMPLE 5 HOVER REVEAL INTERACTION

[resolved] Hover transition / interaction in stacked layout

Hey y'all! I looked diligently for a solution to this on the forum but couldn't find anything. I hope I didn't miss it somewhere! I'm working on a 3 column stacked layout of image and i want transitions when the images are hovered. I'll be integrating it with a CMS (probably WordPress) and want to allow the client to upload their own images as they desire and put in their own text. On the left column of images, because the div is set to 100% height, you'll notice that the hover effect take…

https://www.bloc.io/tutorials/webflow-tutorial-design-responsive-sites-with-webflow#!/chapters/698

[vincent]

Check this https://v.usetapes.com/sJ0kmkSp8f

It cuts before the end but you should get if from there

[troy]

Wow... managed to pull it off I think.

Thanks a lot Vincent!
You overestimated my knowledge a bit but I think I've cobbled it together.

https://preview.webflow.com/preview/orange-site?preview=b435ab8ceb60b599de1b21661ba8a78b

One thing I'd like to do with the initial hover reveal is to make the hit area larger than the 15px that are showing... we have a hover interaction on that "inner" div but ideally that small sliver is more of an indicator that there's a description waiting for hover but that area is really small (and frankly I'd like to make it smaller yet). What do you think? Any clean and simple way to do that that won't screw up what I've done here?

Thanks again Vincent
troy

[vincent]

hmmm... then this element has to be made of 2 elements, the red one being only the one inside the other. then the other gets the same color as the bg of the main block, thus being invisible but catching the hover to make the interaction go further... makes sense? There are actually as mush solutions as you can think of on this matteR.

[troy]

Well there are images not solid colors in the blocks you're referring to so coloring the larger hit state element (to appear invisible) won't work. I'll try the same but with the opacity set to 0 - assuming that will still work?

At this point this issue is really low priority so I'll set this aside for now and hit it again once I get to the finer tuning phase

Thanks again for your help with this Vincent!
troy

[system]

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.