In this guide, we will show you how to add a “Content Reveal on Hover widget” to your Elementor website. The Content Reveal on Hover widget allows you to reveal hidden text, buttons, or other content when users hover over an element, enhancing interactivity and engagement. Perfect for creating eye-catching designs and adding dynamic functionality, this free widget lets you seamlessly display additional content in a subtle and engaging way.
Let’s explore the customization options available in the “Content Reveal on Hover widget” for Elementor below.
Elementor Free Content Reveal on Hover Tutorial Video
Add a Free Content Reveal on Hover to Elementor
Add a Free Content Reveal on Hover Widget to an Elementor Page
Elementor Content Reveal on Hover Widget 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.
Show Icon
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
Toggles the visibility of an icon on the primary button.
Show Button Two
Toggles the visibility of a second button.
Show Badge
Toggles the visibility of a small badge or label.
Elementor Content Reveal on Hover Widget Style Settings
Align
Controls the horizontal alignment of the content within the widget.
Left
Center
Right
Content Padding
Sets the inner spacing between the content and the edges of its container. You can adjust the padding for the Top, Right, Bottom, and Left sides independently or link them together for uniform padding.
Box Radius
Controls the roundness of the corners of the widget’s main box or container.
Box Border Type
Allows you to define the style of the border around the widget’s box.
Default
None
Solid
Double
Dotted
Dashed
Groove
Content Vertical Align
Controls the vertical alignment of the content within the widget’s container.
Start
Center
End
Box Shadow
Opens controls to add a shadow effect to the widget’s main box, allowing you to customize its color, blur, spread, and position.
Image Height
Controls the height of the image.
Blend Mode
Determines how the image blends with elements behind it.
Normal
Multiply
Screen
Overlay
Darken
Lighten
Color Dodge
Luminosity
Background Color for Blend Mode
Sets a background color for blend mode interaction.
Image Position
Controls the image's positioning within its container.
Top Center
Center Center
Bottom Center
Top Left
Top Right
Bottom Left
Bottom Right
Overlay Color
Allows you to choose between a solid color and a gradient for the overlay.
Overlay Color Color
Sets the solid color of the overlay.
Overlay Color Image
Allows you to select an image to use as the overlay instead of a color.
Overlay Opacity
Controls the transparency of the overlay when the widget is in its default (non-hovered) state. A higher value means less transparency.
Overlay Opacity Hover
Controls the transparency of the overlay when the widget is hovered over. This allows for a visual change in the overlay’s transparency on interaction.
Title Typography
Opens controls to customize the font, size, weight, line height, letter spacing, and other typographic properties of the title.
Title Color
Sets the color of the title text.
Title Hover Vertical Gap
Controls how much the title moves vertically (up or down) when the widget is hovered over. A negative value typically moves the title upwards.
Button Style
Controls the width behavior of the button.
Auto Width
Full Width
Button Typography
Opens controls to customize the font, size, weight, line height, letter spacing, and other typographic properties of the button text.
Button Padding
Sets the inner spacing between the button's text and its edges. You can adjust padding for Top, Right, Bottom, and Left sides.
Button Spacing Top
Adds space above the button.
Button Gap
Controls the horizontal spacing between buttons if there are multiple buttons present.
Button Border Radius
Controls the roundness of the button's corners.
Normal / Hover Tabs
These tabs allow you to define different styles for the button in its default (Normal) state and when it is hovered over (Hover).
Button BG Color
Sets the background color of the button. This setting is available for both Normal and Hover states.
Button Text Color
Sets the color of the text on the button. This setting is available for both Normal and Hover states.
Button Border Type
Allows you to define the style of the border around the button. This setting is available for both Normal and Hover states.
Default
None
Solid
Double
Dotted
Dashed
Groove
Button Border Width
Sets the thickness of the button's border for the Top, Right, Bottom, and Left sides. This setting is available for both Normal and Hover states.
Button Border Color
Sets the color of the button's border. This setting is available for both Normal and Hover states.
Icon Size
Controls the size of the icon for the second button.
Icon Gap
Sets the spacing between the icon and the text label of the second button.
Icon Position
Determines whether the icon appears before or after the button's text label.
Before Label
After Label
Icon Color
Sets the color of the second button's icon in its normal state.
Icon Color Hover
Sets the color of the second button's icon when the button is hovered over.
Icon Shadow
Opens controls to add a shadow effect to the second button's icon, allowing customization of color, blur, spread, and position.
Content Reveal on Hover Widget Design Examples For Elementor
Here are some live use cases for the Content Reveal on Hover widget.
Hover Text Reveal Content for a real estate website.
Hover Text Reveal Content for Food Menu.
Thank you for using the Content Reveal on Hover widget for Elementor! This unique tool reveals hidden text, buttons, or other content when users hover over an element, boosting interaction and engagement with a dynamic effect. With its subtle animation, customizable options, and seamless integration, it fits perfectly into your site’s design, and, best of all, it’s free. For questions or inspiration, feel free to reach out or explore our demo.