The Hover Card block from Nexter Blocks allows you to create a hover effect simply by assigning a parent container class name. This class enables you to apply custom styles and animations to the hover state, making your website more interactive and visually appealing for users.
To check the complete feature overview documentation of the Nexter Blocks Hover Card block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
You can find the Custom Hover option in Background Style as well as in Text and Image content type separately, but the process works similarly for all.
Here we’ll use the Custom Hover option from Background Style.
For example, we have an anchor tag button inside a container class called “card”.
Now we want to change the button background color when someone hovers over the “card” container.
So in the Hover Card block, we have an item with Div as the Open Tag and card as the class name, since we want to add an anchor tag inside the div, we’ll set None as the Close Tag. We’ll select None in the Content because this div is just a container.
Then, in the second item, we’ll select a as the Open Tag and Default as the Close Tag. In the Content, we’ll select Text and add text for the button.
In the third item, we’ll set None as the Open Tag and Div as the Close Tag since we want to close the card container here.
Set None in the Content section as well.
Note: Make sure to style the elements according to your needs.
Now open the second item and turn on the Background toggle under the Background Style section.
Go to the Hover tab and turn on the Custom Hover toggle. In the Enter Class field, add the parent container class name you want to target, for instance, we’ll add “card” here.
Note: Make sure to add the class name without .(dot) in front.
From the Background section, we’ll change the background color.
Now, if you hover over the card container, the button background color will change.
