Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 9, 2018 at 7:54 pm #939376
    heidezc

    How would I accomplish something like the responsive diamonds on this page:

  • https://terranovachurch.org/

    • Specifically the colored hover with the word in the middle. The icon at the bottom would be cool, but it’s not necessary.
    Plugins are fine if you have suggestions, or just CSS code. Thank you in advance.

    • This topic was modified 6 years, 7 months ago by heidezc.
April 10, 2018 at 1:38 am #939505
Jordan Shannon

Hey heidezc,

This is something that may be possible to accomplish via css. Can you please provide a link to your site so I can examine what you have so far?

Best regards,
Jordan Shannon

April 10, 2018 at 1:41 am #939514
heidezc

I have nothing at all so far, so I’m willing to take any suggestions.

April 10, 2018 at 1:47 am #939520
Jordan Shannon

Hi,

Well you would need to get a bit creative haha. You have the options to use images to make the diamonds, in which you would then set the images as the background for the columns.

Option two, would be to see the column to have a a square dimension and border, and use css to rotate the column so it gives the diamond effect.

But before anything you need to start the page so you can decide how best to apply it.

Best regards,
Jordan Shannon

April 10, 2018 at 1:49 am #939523
heidezc

I’m sorry, I wasn’t clear. I don’t want the diamond shape. I want the semi-transparent overlay with a custom button/logo (or whatever you want to call it) in the middle. They will very likely be squared shaped as normal.

  • This reply was modified 6 years, 7 months ago by heidezc.
April 10, 2018 at 10:40 am #939753
Victoria

Hi heidezc,

This can be done with masonry, something like here

Masonry Portfolio: 4 Column Masonry Grid

If you need further assistance please let us know.
Best regards,
Victoria

  • Author
    Posts
    • Viewing 6 posts - 1 through 6 (of 6 total)
    • You must be logged in to reply to this topic.