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.
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?
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.
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
