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 that to toggle between the different states of the block. You can toggle between:

  • Normal
  • Hover (when the mouse is hovered in the block)
  • Parent Hovered* (when the most is hovered on 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 most is hovered on the Parent 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 on.

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 Card block.

  • Just navigate to the Style tab where you will see the Container Borders & Shadow tab.

  • Set the Shadow / Outline option to 0
  • Click on the Cursor 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.

  • Just navigate to the Style tab where you will see the Image tab.

  • Scroll down to the Image Filter options, and set the filter you want when the block is at it's normal state (not hovered)
  • Click on the cursor icon and select Hover and 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, and nest blocks and combine their different hover states for amazing results.

Just follow the same steps when setting the Hover States, but this time, set your Parent Hovered state as well which you will see when you click on the cursor icon.