Menu icon Foundation
RWD tile menu buttons with transparent background

Trying to figure out how best to code a tile menu as shown in the attached image. A table would be perfect... but that's a no-no. Plus it wouldn't look nice on a mobile. Any ideas from more experienced developers than myself would be greatly appreciated.

Foundation's block-grid works well, except for the longer text tile on the bottom right. Thanks!

Portfolio

menubuttonstransparentblock-grid

Trying to figure out how best to code a tile menu as shown in the attached image. A table would be perfect... but that's a no-no. Plus it wouldn't look nice on a mobile. Any ideas from more experienced developers than myself would be greatly appreciated.

Foundation's block-grid works well, except for the longer text tile on the bottom right. Thanks!

Portfolio
Feather Light almost 6 years ago

I do not understand what you ask,
That I understand from the title of your post, is to make the transparent background ?
For css you can use: RGBA color

/*                                            R       G     B      Opacity   */
background-color: RGBA (255, 255, 255, 0.5);

If you want to change the image manually becomes transparent, use jquery plugins or manually change the opacity transparent tool in photoshop(but it's not free) or something like that.

Is that what you mean ?, or can explain in more detail :)

Thanks

Tomas Gray almost 6 years ago

Sorry about being so vague. I have since abandoned this design and started over from scratch, but I was trying to find out about best practices for creating a block grid as pictured with one (or more tiles) which exceeded the bounds of the grid (like the colspan attribute for tables) that would rearrange nicely on a mobile. Thanks for responding!