Hey guys,
I’m trying to achieve the following:
On a team page I have square boxes with team photos. Now I want to slide in an overlay (gradient from blue → transparent) and a text with the name and position of the person in question.
I already tried the interaction thing but it didn’t really work for me the way I want it to. I must be doing something wrong here so if someone could enlighten me how to achieve this, that would be great.
Thank you 
Hey there!!
I just made and posted a component for this to BricksBoard (our new free Bricks component sharing website) - it’s exactly what you described, the only possible difference is that it fades in instead of sliding in. That allowed me to make it with nothing but CSS 
You can copy + paste the component straight into your site from this link: Team Section Cards With Overlay | Free Bricks Builder Component | Bricks Board
Here’s what it looks like - the left one has been hovered over.
Hey thanks for this, it’s almost what I was looking for. Do you have a tip for me on how to slide the overlay in? I used css transform to basically shift it outside of the box and want to slide it in on over but since the overlay is outside the box now, the hover doesn’t apply anymore since the item to hover over isn’t there anymore if that makes sense 
I see what you mean!
You can use nested CSS selectors to move the child when the parent is hovered over - for example:
.parent-div:hover .child-div {
transform: scale(1.2); /* Example: make the child div bigger when parent is hovered */
}