Hey guys! Here’s the link to the new project I’m working on.
The problem I’m facing is that I have a main wrapper (“benefits wrapper”) which has some secondary divs inside of it.
I gave overflow:hidden to it so that on hover I can move the inner elements up so that it acts like a deck.
Now straight to the issue - design-wise, I’d like to add a shadow to that “benefits wrapper” however when I gave it the overflow:hidden setting, it has some extra space above it, which causes the shadow to be displayed incorrectly (not only fall off the main div, but also from the corners of that empty space).
Does anyone know what is causing this behavior and how it can be fixed?
I’ll appreciate all the suggestions, thanks!
I don’t see the condition that you’re talking about. Do you have shadows setup on it now? Also, are you talking about the thumbs-up cards panel (Benefits Row)? Or some other section of the site?
If it’s Benefits Wrapper, I see space between the wrapper and the image that could be an issue, but without better understanding of what you’re talking about and an example… I’m at a loss.
Please clarify this further and put the shadow in place.
Sorry for not making it too clear.
You got me correct - I meant it to be about the thumbs up decks (the whole wrapper).
Now I added the shadows so that you can see where the issue is. I tried setting up fixed height of 370px to either wrapper itself, row or column, but it didn’t make any change.
The issue is only there when I set overflow on the “benefits wrapper” to hidden, which is required for the hover effect to work, otherwise the inside-blocks will be seen moving outside of the wrapper.
So, try this out and see what you think. I hope this helps. If this is not what you were talking about, please let me know and I’ll try to help further.
