One of the best ways to boost interactivity on your website is to show content on hover in Elementor. This effect allows hidden text, images, or icons to appear only when users hover over a section or element, adding a dynamic touch without cluttering your layout. It’s a subtle yet powerful technique to grab attention, encourage exploration, and enhance the overall user experience.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Content Reveal on Hover widget to your Elementor website
To show content on hover, install the Content Reveal on Hover widget from the Unlimited Elements Widget library.
Step #4: Add the Content Reveal on Hover widget to your Elementor page
Now, in the Elementor editor, find the Content Reveal on Hover widget and drag it to the desired part of your page.
General Settings
Image
Sets the primary image for the widget display.
Transition Time (seconds)
Controls the duration of the content reveal transition animation.
Overlay Transition Time (seconds)
Specifies how long the overlay effect should take to transition during the reveal.
Button Hover Transition Duration (seconds)
Sets the time it takes for button hover animations to complete.
Show Content on Breakpoint
Determines whether the content should be visible by default on specific screen sizes (breakpoints).
RTL
Enables Right-to-Left text direction for languages that require it.
Layout Settings
Show Icon (Pro)
Toggles the visibility of an icon within the content area.
Show Title
Toggles the visibility of a title.
Title
Allows you to enter the text for the title that will be displayed.
Title HTML Tag
Specifies the HTML tag (e.g., H1, H2, div, span, p) that will be used for the title. This is important for semantic structure and SEO.
Show Text
Toggles the visibility of a text content area.
Text
Provides a rich text editor to input the main descriptive text or content that will be revealed on hover. It includes options for “Add Media,” “Visual” editor, and “Code” editor.
Show Button
Toggles the visibility of a primary button.
Button Label
Allows you to enter the text that will appear on the primary button.
Button Link
Sets the URL or link that the primary button will navigate to when clicked.
Show Button Icon (Pro)
Toggles the visibility of an icon on the primary button.
Show Button Two (Pro)
Toggles the visibility of a second button.
Show Badge (Pro)
Toggles the visibility of a small badge or label.
Wrapping it Up!
Adding the ability to show content on hover in Elementor is a simple but effective design choice that elevates your site’s interactivity. By using this effect, you can highlight important details, encourage user engagement, and keep your layout clean while still delivering valuable information. Start experimenting with hover reveals today to create a more dynamic and modern website experience.