How to Style the Different Block Hover States

What are Hover States?

This feature allows you to style your blocks differently when you hover your mouse over them or their parent container. There are options to style your blocks with more options such as image zoom, filters, and more which could you be used when styling hover states.

You can also style the Parent Hovered state where the style will get applied when the Parent Container is hovered. This feature will allow you to style a container where its contents would also adjust when you hover over the container, creating more eye-catching results if combined with different hover states.

How to Use Hover States

When editing your block attributes in the inspector, you may notice a small arrow icon beside the name of some options.

Click on the arrow icon to toggle between the different hover states of the block. You can toggle between:

  • Normal
  • Hover (when the mouse is hovered over the block)
  • Parent Hovered* (when the mouse is hovered over a parent block’s container)
  • Collapsed (for Accordions)

*The Parent Hovered option will only become available when a parent block has the Style tab > Container Background turned on.

For Parent Hovered, the hover state would take effect when your mouse is hovered over the Parent block with the container. This allows you to combine hover styles together with other adjacent blocks so they all animate together when the parent block is hovered over.

Hover State Example

You can change the styles of a block when the mouse if hovered on it to achieve different designs.

In this example, we are adding Shadow effects upon hover on the Inner Column block which has a Call to Action block nested inside.

Navigate to the Style tab where you will see the Container Borders & Shadow panel. Make sure that the Container is toggled on in the Layout tab.

  • Set the Shadow / Outline option to 0
  • Click on the arrow icon to see the Hover State options
  • Select Hover and adjust the Shadow / Outline accordingly

You will see the Shadow effect when you hover over the block.

You also have more styling options such as Image Zoom, Filters, and more.

In this example, we are adding Image Zoom and Image Filter upon hover on the Card block.

Select the Card block and navigate to the Style tab where you will see the Image panel.

  • Scroll down to the Image Filter option then set the filter you want when the block is at it's normal state (not hovered)
  • Click on the arrow icon, select Hover, then set the filter you want when the block is hovered

  • Scroll to the Zoom option and repeat the same steps.

You can also style blocks when their parent container is hovered, nest blocks and combine their different hover states for amazing results.

Just follow the same steps when setting the Hover States, but this time, select the Parent Hovered state which you will see when you click on the arrow icon.