Flexbox, text overlay when hovering an image. I'm stucked.

[Mooks]

Hello there,

After few months visiting this CSS tricks for several…tricks :p, I have finally decided to join in order to see if some more experienced designer can help me.

I’m actually trying to put an overlay on a grid of post I made. What I wish is to display a content div (exerpt) when hovering the post thumbnail. The thing is I have no idea on how to do it with flexbox (because it’s a flexbox grid).

Any help will be really appreciated. You can see a CodePen here :
https://codepen.io/Mooks/pen/NRqWKO

Or in live in my (under construction) website : https://www.les-alternatives.com

Kind regards.

[Paulie_D]

The same way you’d do any overlay…with positioning…it works exactly the same way as normal as in flexbox.

[bearhead]

Are you trying to do something like this?
http://codepen.io/kvana/pen/GjJNKo

[Mooks]

Exactly! Exepted that I want the title to be always visible, and the content only being shown when hovering.

The thing is I have never really understood the different technics behind overlay, some people seems to use z-index, some others top -50% and :after statement.

Well, whatever, thank you… i’ll check the code in 2-3 hours when i’ll have more time, this will not be too much difficult to separate the date and title from the content overlay.

[Mooks]

The updated codepen (need some adjustments but it works in this state) :
http://codepen.io/Mooks/pen/NRqWKO

One more time, thank you. Looking at how you did, it was simple as fuck. I wonder why I didn’t used my brain.

[bearhead]

If you’re concerned about browser support for flexbox, you can create a fallback by adding display:block before display:flex for .clickable-container:hover .overlay

[Mooks]

Yep i knew it, but it’ll lost any centered block property probably. I’ll test it. Nevertheless, thank you for the tip.

[stefanio]

Hey,
Thanks to both of you. I have, just like Mooks tried to find a clean, simple example of this- and this one here is the best.
CSS Tricks is so much better as a visual, hands-on developer guide than all the other resources.

[Author]

Posts