Add Mouseover Effect to Gutenberg block in WordPress

Overview

How to add a mouseover effect to Gutenberg blocks in WordPress. In this article, we will discuss the steps to add Mouseover effect that can be applied to any Gutenberg block level element.

We have already discussed in our previous article how to Add Shadow to Gutenberg blocks in WordPress. After adding Shadow to Gutenberg block element we will apply Mouse over effect to the block element which will come into action when you hover your mouse over the block element.

Prerequisites

Good to have Knowledge

Good to know

You should know the basics of CSS or at least possess some basic understanding of the CSS to achieve this. It is also essential that you learn how to add a custom class in WordPress Gutenberg and where to add the custom CSS in WordPress. Do not panic if you are unaware of what is CSS and how it works. We will share all the needed steps through this article to make it easy for you. If you follow the steps as directed, you should be good to go.

Solution

To apply a mouseover effect to Gutenberg blocks in WordPress, you will need to implement a custom class to the block where you want to add a mouseover effect. Please refer to the following article to learn how to add a custom CSS Class.

How to add a custom CSS Class to Gutenberg Block?

In this demonstration, we will apply a class shadow-with-mouse-over-effect to the Gutenberg block element. With the following code, we will be able to add nice Shadow effect to this element.

.shadow-with-mouse-over-effect {
    background: #efefef;
    box-shadow: 0 0 17px 0 rgba(0,0,0,0.06);
    margin-bottom: 30px;
    transition: .3s;
}

Where to put Custom CSS code in WordPress?

Most of this code has been clearly explained and discussed in the “how to Add Shadow to Gutenberg blocks in WordPress” article. There are a few differences that we will explain after the following code block that will trigger the nice pull effect when you place your mouse over the element. See closely in the class call, we have a :hover added as a suffix which is a CSS pseudo-class.

.shadow-with-mouse-over-effect:hover {
    box-shadow: 0 20px 25px rgba(0,0,0,0.15);
    transform: translateY(-4px);
}

What is CSS Transition Property?

CSS transitions help you to manage animation speed when switching CSS properties. Learn More about CSS transitions.

What is CSS Transform Property?

CSS property helps us to rotate, scale, skew or translate an element. Learn More about CSS Transform.

What is CSS :hover?

The :hover is a CSS pseudo-class which triggers when the user hovers the cursor over an element. Learn More

Block Elements with Mouseover effect

The shadow-with-mouse-over-effect class applied and should show you the nice drop shadow effect and should raise when you place your mouse over it. The following image should also show the same effect as it also carries the same CSS class.

It is important to remember that this class is not using any CSS Type or ID selectors such as paragraph (P) or heading (H1, H2, H3, etc.) and hence will apply the same effect irrespective of the content inside the Gutenberg block. If you would like to implement a slightly different effect to an image block or a heading block, you should consider applying a respective selector while writing your CSS code. Refer this article to learn how to implement a CSS selector.

We hope you find this article useful. In case you are stuck and or need help, feel free to drop a comment or submit your question. Do share it further and add your feedback about the article in the comments section.