Create a Popup Text Path Menu with a Hover Image Effect [Advanced]

In this Advanced Tips & tricks tutorial we’ll learn how to create a popup text path menu with an awesome animated hover effect on the image to really level up our navigation designs.

The tutorial will cover:
✔︎ Creating a popup menu
✔︎ Using the Text Path Widget with a custom SVG
✔︎ Hiding and rotating image using custom CSS
✔︎ Connecting the popup menu to the icon in header section
✔︎ And much more!

Links:
Text Path Widget Tutorial https://youtu.be/aeqpeYkE_yE
How to create a custom SVG https://elementor.com/help/how-to-cre…

CSS Snippets:
.menuImg{
opacity:0;
transition: all 0.8s ease-in-out;
transform: rotate(25deg);
}

.menuTitle:hover + .menuImg{
opacity:1;
transform: rotate(15deg);
}

Related Topics

Share

Was This Helpful?

Thanks for your feedback!

Recommended Videos

The Future
of Web Creation. Straight to
Your Inbox.

What interests you?

Great!

Awsome content is on the way.

More Resources