Perfectly overlap two containers?

Is it possible to create and perfectly overlap two containers? My intention is to create a container with an image, and the second container to contain custom HTML (with a specific CSS class), so that when I hover over the image container, a specific text and a button will appear as an overlay.

Using GB Pro, you can do this by adding an image as background for the container, inside another container with the text and button (you can recreate that custom HTML with GB Blocks).

To that inner container, you could add some effects to hide while “normal” and show (with some cool and smooth transition) while “hover”.

1 Like

Thank you for the answer. The same suggestion I’ve got from two members from the GB FB group. My Q is how can set up a custom height and width for the image used as background. Is it possible in any way?

You must change the size of the container with the image:

  • For custom width, you can define it on the block settings, in Design > Width container
  • For custom height, you can define it on the block settings, in Spacing > Minimum height
1 Like

Thank you, roirobo. I am a little confused about what Design > Width container are you talking about. i can find only the container width in percentage under Layout. There is a section named “Design” somewhere?

While editing an entry or page, you can find it in the right sidebar of the editor: