BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Pro widget

Hover Reveal Box Widget for Elementor Pro

An image card that reveals more content on hover

Overview

What Hover Reveal Box does

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.

Live demo

See it in action

Brand Strategy

Positioning and identity
Brand Strategy
We shape how people see your business, from naming and messaging to a visual identity that sticks.
Video

See it in video

Features

What it can do

  • 12 reveal effects, including Fade, Slide Up, Push Up, Zoom In, Blur, Flip Up, Curtain and Circle Grow.

  • Image hover effects: Zoom In, Zoom Out, Zoom and Rotate, Pan, Grayscale to Color, Blur or None.

  • Front media can be an icon, an image, a number or nothing.

  • Revealed title, rich text description and button can appear one after another.

  • Optional badge in the top left or top right corner.

  • Front content can stay visible while the reveal layer comes in.

  • Duration and easing are adjustable, including a Bounce easing.

  • On touch screens the first tap reveals the content and the second tap follows links.

Use cases

When to use it

Service cards

Show the service name on the front and a short description with a button on hover.

Numbered process steps

Use the Number media for 01, 02, 03 and reveal the details of each step.

Portfolio tiles

Put a project photo in the background and reveal the summary and a link to the case study.

Feature highlights

Add a badge such as New and reveal what the feature does.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag Hover Reveal Box onto the page and choose a Background Image in the Front section.

  2. Pick the front Media type and set the Icon, Image or Number, then fill in Title and Subtitle.

  3. Open Revealed Content and write the Title and Description.

  4. Keep Show Button on and set Button Text and Button Link, or turn it off and use Whole Box Link.

  5. Open Effect Settings and choose a Reveal Effect and an Image Hover Effect.

  6. Set Duration (ms), Height and the content positions.

  7. Style the box, media, text, button and badge in the Style tab.

FAQ

Questions and answers

How does a hover card work on phones?

The first tap reveals the content and a second tap follows the button or box link. Tapping outside the card closes it.

Can the whole card be a link?

Yes. Turn Show Button off and set Whole Box Link. The link then covers the entire card.

Can I use a number instead of an icon?

Yes. Set Media to Number and type it in the Number field. It has its own typography setting in the Style tab.

Can the description include links or lists?

Yes. Description is a rich text editor, so formatted text, links and lists are allowed.

Bright Addons Pro

Get Hover Reveal Box with Bright Addons Pro

Bright Addons Pro has 80 Pro widgets plus all 53 free widgets, 10 extensions, a Theme Builder and 32 dynamic tags. From $18 a year, with a 14-day money-back guarantee.