The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #245271

    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 :

    Or in live in my (under construction) website :

    Kind regards.


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


    Are you trying to do something like this?


    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.


    The updated codepen (need some adjustments but it works in this state) :

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


    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


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


    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.