Background image with text and multiple links overlay

Hey J_L,

Sure, but it isn’t possible with how the masonry element is made.
You can do the following:
1. Add 1/3 under Layout Elements, set Row Settings to Equal Height Columns.
2. Add a background image to it and padding.
3. Insert a textblock inside it, write those texts and add links.
4. Repeat.
Hope this helps.

Best regards,
Nikko

Hi J_L,

You’re welcome, glad that we could help :)

Best regards,
Nikko

Hi J_L,

I see, I think it will still do but will need to add further steps.
1. In Enfold > Layout Builder > Custom CSS classes input field, set to Show and allow to edit classes.
2. Edit the page, edit those 1/3 element then in Custom Css Class field put my-grid. (do this on other 1/3 elements, so they’ll have the same classes)
3. Edit the text block inside the 1/3 element (the block that needs to be hidden and only shown on mouse hover), in the Custom Css Class field put my-grid-links. (do this in other text block inside the 1/3 element).
4. Go to Enfold > General Styling > Quick CSS, then add this css code:

#top .my-grid .my-grid-links {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

#top .my-grid:hover .my-grid-links {
  opacity: 1;
}

Let us know if this helps.

Best regards,
Nikko