With the Hover Card widget from The Plus Addons for Elementor, you can create a completely custom layout tailored to your unique design preferences. Easily add and arrange elements, customise styles, and add interactive hover effects to craft visually captivating and engaging content.
To check the complete feature overview documentation of The Plus Addons for Elementor Hover Card widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
To create a custom layout using the Hover Cards widget, ideally, you should have the design ready.
For example, here, we’ll create a simple profile card. Where we’ll have a profile image, name and designation, and on hover, the card will grow.
For the layout structure, we’ll keep all the profile image, name and designation inside a div called “card”.
To create the layout, add the Hover Card widget on the page and click the +ADD ITEM button to add an item.
Set Div as the Open Tag and card as the class name since we want to add other elements inside the div, set None as the Close Tag. In the Content, select None because this div is just a container.
Click the +ADD ITEM button to add the next item, select Div from the Open Tag dropdown.
Then set Default as the Close Tag, so the tag closes there.
From the Content dropdown, select Image.
Again click on the +ADD ITEM button to add the next item for the name, select H3 from the Open Tag.
Then set Default as the Close Tag to close the h3 tag.
From the Content dropdown, select Text and add the content in the Text field.
To add the designation, click the +ADD ITEM button to add an item, then select p from the Open Tag.
Then set Default as the Close Tag to close the p tag.
From the Content dropdown, select Text and add the content in the Text field.
Now to close the main div i.e. “card” click the +ADD ITEM button to add another item. In the Open Tag, select None and Div as the Close Tag, this will close the div with the class name “card”.
Note: Make sure to style the elements from the different styling options according to your need.
So the layout is ready, now for the hover effect, since we want the entire div to grow on hover, select the first item and turn on the Background toggle under the Background Style section.
To add the scale effect, go to the Transform CSS field, and add scale(1.1).
Now if you hover over the div, it will grow slightly.
Also, read How to Add Hover Effect With Custom Hover Class in Elementor Hover Card.
