Note: You can use any block for your hidden content, just ensure the block has a custom CSS class of ‘hidden’
The images are defined in the top level sections, and each section must have a minimum height set in its structure settings.
The gradient overlay is defined in the nested row’s background overlay settings. You can change this however you choose and it will remain invisible until hover.
In order to have a smooth transition on hover, we have to define a max-height for the hidden block. This is set using a CSS variable in the Custom CSS toggle of the parent row:
:root {
–bb-hover-reveal-cards-1-height: 100px;
}
If you increase the hidden content length or the number of columns in the row, you may need to increase the max-height variable above 100px for all the content to display on hover.
The CSS is wrapped in a media query so the hidden content and the gradient overlay show by default on tablet and mobile. You can change the breakpoint of that media query by adjusting the ‘1025px’ value, or remove the media query altogether.