WP Manifestindependent plugin directory
manifest / builders / hover-card-widget

Hover Card Widget

A SiteOrigin widget that displays an animated hover card with background image, icon, title, description, and button.

by Roly Estemonio · github.com/rolyestemonio/hover-card-widget

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/rolyestemonio/hover-card-widget/archive/refs/heads/main.zip
Readme github.com/rolyestemonio/hover-card-widget ↗

Hover Card Widget for SiteOrigin Page Builder

An animated hover card widget for SiteOrigin Page Builder (Widget Bundle required).

Requirements

Installation

  1. Upload the hover-card-widget folder to /wp-content/plugins/.
  2. Go to Plugins → Installed Plugins and activate Hover Card Widget.
  3. The widget will now appear in SiteOrigin Page Builder and the classic Widgets screen.

Widget Settings

Background

Field Description
Background Image Upload or select the card's background image
Overlay Color Dark tint on top of the image (hex color)
Overlay Opacity Opacity % of the overlay in default state
Hover Overlay Opacity Opacity % of the overlay when card is hovered
Card Width (px) Width of the card (default: 320)
Card Height (px) Height of the card (default: 420)

Icon

Field Description
Icon Choose from all SiteOrigin icon libraries
Icon Color Color of the icon
Icon Size Size of the icon in px

Title

Field Description
Title Text The card heading
Title Color Hex color
Title Font Size In pixels

Description

Field Description
Description Rich text (TinyMCE editor)
Description Color Hex / rgba color
Description Font Size In pixels

Button

Field Description
Button Label Text shown on the button
Button Link URL the button links to
Open in New Tab Opens the link in a new browser tab
Button Background Color Default background
Button Text Color Label color
Button Hover Background Color Background when hovered
Button Font Size In pixels

Behavior

  • Default state – Shows the icon centered above the title.
  • Hover state – The icon fades out, the title moves to the top, the description appears in the middle, and the button slides up from the bottom.
  • All transitions are CSS-only (no JavaScript required).

File Structure

hover-card-widget/
├── hover-card-widget.php   ← Main plugin / widget class
├── tpl/
│   └── default.php         ← Front-end HTML template
├── styles/
│   └── hover-card-widget.less  ← Base LESS styles
└── README.md

Customization

All visual properties are controlled through the widget form. If you need further customization, edit tpl/default.php — the scoped `