Add Mouseover Effect to Gutenberg block in WordPress

Add Mouseover Effect to Gutenberg block in WordPress

Posted by

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

Applies only to sites hosted on WordPress.com

These steps need Custom CSS Options enabled which is a feature of WordPress.Com Premium and Business Plans. If you haven’t already brought the WordPress.Com Premium and Business Plan, you should consider one to gain more flexibility with your WordPress.com Site/Blog.

Good to have Knowledge

You should know a little bit of CSS or at least possess some basic understanding of the CSS to achieve this. 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;
}

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

What is CSS Transform Property?

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

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.

2 comments

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.