- This topic is empty.
September 6, 2016 at 4:54 pm #245271
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 : https://www.les-alternatives.com
Kind regards.September 6, 2016 at 11:18 pm #245276Paulie_DMember
The same way you’d do any overlay…with positioning…it works exactly the same way as normal as in flexbox.September 7, 2016 at 7:03 am #245288September 7, 2016 at 7:16 am #245290
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.September 7, 2016 at 7:39 am #245293
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.September 7, 2016 at 8:28 am #245295bearheadParticipant
If you’re concerned about browser support for flexbox, you can create a fallback by adding
.clickable-container:hover .overlaySeptember 7, 2016 at 9:18 am #245297
Yep i knew it, but it’ll lost any centered block property probably. I’ll test it. Nevertheless, thank you for the tip.January 28, 2017 at 9:21 pm #250687stefanioParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.