Menu icon Foundation
Block Grid w/ Text Overlay

Hi Guys,

How can I overlay a text on each block in a Foundation block grid?

I tried everything with position "absolute" and "relative" and it works with the normal grid, BUT NOT WITH THE BLOCK GRID. I can't change the img to a background image in the CSS file because it will be used in a wordpress environment with dynamic content.

Thanks for your help.

Cheers

blockgridoverlay

Hi Guys,

How can I overlay a text on each block in a Foundation block grid?

I tried everything with position "absolute" and "relative" and it works with the normal grid, BUT NOT WITH THE BLOCK GRID. I can't change the img to a background image in the CSS file because it will be used in a wordpress environment with dynamic content.

Thanks for your help.

Cheers

This post has been closed. No new replies can be added.

Tim Hartwick almost 4 years ago

Hi Sandro, I've whipped up a Codepen here: http://codepen.io/tim_hartwick/pen/ojzMvL?editors=101
It's not the prettiest, but I think it addresses the issues you have.

You can also see a more advanced example here: http://foundation.zurb.com/learn/website-examples.html

Hope this helps!

Sandro Seiler almost 4 years ago

Thanks Tim, it works fine. I'm struggling a little bit with the positioning of the p tag, but I'll check the other example...

Cheers…