How to set up and style the Hover Reveal Box widget in Elementor.
Hover Reveal Box is an image card with two layers. The front shows an icon, image or number with a title and subtitle, and hovering reveals a second layer with a title, description and button. Use it for services, team members, features and portfolio items.
Part of: Bright Addons Pro.
| Option | What it does |
|---|---|
| Background Image | The picture that fills the card, with a choice of image size. |
| Media | What sits above the front title: None, Icon, Image or Number. |
| Icon | The icon shown when Media is Icon. |
| Number | The number or short text shown when Media is Number. |
| Title | The heading on the front of the card. |
| Subtitle | A short line under the front title. |
| Badge | Optional small label in a top corner, for example New. |
| Title Tag | The HTML tag used for the front title. |
| Option | What it does |
|---|---|
| Title | The heading on the reveal layer. |
| Description | The text on the reveal layer, written in a rich text editor. |
| Show Button | Shows a button on the reveal layer. |
| Button Text | The label of the button. |
| Button Link | Where the button goes. |
| Button Icon | An optional icon in the button, placed with Icon Position. |
| Whole Box Link | Makes the entire card clickable when the button is off. |
| Option | What it does |
|---|---|
| Reveal Effect | How the second layer appears, from 12 effects. |
| Image Hover Effect | How the background image changes on hover. |
| Stagger Revealed Items | Brings in the title, description and button one after another. |
| Keep Front Content Visible | Keeps the front title in place while the reveal layer comes in (not with Push Up). |
| Duration (ms) | How long the reveal takes. |
| Easing | The motion curve: Smooth Out, Ease, Ease In Out, Linear or Bounce. |
| Height | The height of the card, per device. |
| Front Content Position | Places the front content at the top, middle or bottom. |
| Revealed Content Position | Places the revealed content at the top, middle or bottom. |
| Text Alignment | Aligns the text on both layers left, center or right. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
border radius, border, image overlay, CSS filters and shadow for normal, reveal layer background, filters, shadow, Lift and border color for hover, plus Front Padding and Revealed Padding.
size, number typography, color, background, padding, border radius, border and spacing (hidden when Media is None).
typography, color, text shadow and margin for each.
typography, color, text shadow and margin for the revealed title and the description.
typography, icon size and spacing, colors, background and shadow for normal and hover, hover lift, border, radius and padding.
position (Top Left or Top Right), typography, color, background, border radius, padding and offset (shown when a badge is set).
The first tap reveals the content and a second tap follows the button or box link. Tapping outside the card closes it.
Yes. Turn Show Button off and set Whole Box Link. The link then covers the entire card.
Yes. Set Media to Number and type it in the Number field. It has its own typography setting in the Style tab.
Yes. Description is a rich text editor, so formatted text, links and lists are allowed.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide