Building a card layout with a “hover reveal” effect

Clickable cards are a common interactive component. There are quite a few things to consider when creating them, and a lot depends on the context in which they’re being placed. Today, you will learn how to create them with the Grid block and add some CSS-based animation to enhance the final outcome.

Here are the general steps you will take:

1. Create a layout with the Grid block and nested inner blocks.
2. Register a new block style to expand the clickable surface area.
3. Add animation to nested elements with more custom styles.
4. Save the block layout as a Pattern.

Below is a video that captures the final “hover reveal” effect that you’ll create. If you would like to experiment with the final pattern or even a plugin while reading, here is the Grid Cards pattern and the hover-reveal-effect plugin.

Create the card layout with the Grid block

First, you’ll build the card layout and appearance with blocks. I ended up using the following blocks:

• A Grid block with Auto layout type enabled. Also, you may want to consider setting the Advanced > HTML Element to <section>.
  • A Cover block with an image and an overlay applied. Also, you may want to consider setting the Advanced > HTML Element to <article>. This depends on how you intend to use the final pattern. Different HTML semantics can apply in different contexts.
    • A Stack block with a minimum height of 22rem and the vertical alignment type is set to Space between. These blocks are representative of our cards.
      • A Group block with a nested Paragraph block to represent a label for our card.
      • Another Group block comprised of a nested Heading with a link and Paragraph block as a brief excerpt.

Below is a screenshot of the blocks that form the final Grid Cards pattern: