Effects · Gutenberg
Hover Card block for WordPress
Card that reveals hidden content (overlay) when hovered with customizable direction and animation.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Card that reveals hidden content (overlay) when hovered with customizable direction and animation.
Inspector panels on this block: Image, Reveal Content, Reveal Effect, Card Size. Those titles come from index.js, not from a shared template.
Behavior controls: “Reveal Direction” options: From Bottom, From Top, From Left, From Right, Fade In.
Hover Card has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Effects → search “Hover Card” (block name `blockenberg/hover-card` in block.json). Style it in the sidebar after insert.
How to use Hover Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Hover Card”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Image. Set “Heading”, “Reveal Content — Text”, “Show Button”, “Button Label”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Heading | Text field in the inspector. block.json default: Card Title. Saved as `heading`. |
| Reveal Content — Text | Text field in the inspector. block.json default: Hover reveal description goes here.. Saved as `text`. |
| Show Button | On/off toggle in the inspector. On by default. Saved as `showBtn`. |
| Button Label | Text field in the inspector. block.json default: Learn More. Saved as `btnLabel`. |
| Button URL | Text field in the inspector. block.json default: #. Saved as `btnUrl`. |
| Reveal Direction | Select control; the chosen value is saved on the block. Options: From Bottom; From Top; From Left; From Right; Fade In. block.json default: bottom. Saved as `revealDirection`. |
| Transition Duration (ms) | Numeric range control in the inspector. Range 100–1000. block.json default: 300. Saved as `duration`. |
| Card Width (px) | Numeric range control in the inspector. Range 160–700. block.json default: 300. Saved as `cardWidth`. |
| Card Height (px) | Numeric range control in the inspector. Range 120–700. block.json default: 220. Saved as `cardHeight`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `borderRadius`. |
| Card Background | Color control in the inspector. block.json default: #1e0a3c. Saved as `bgColor`. |
| Overlay Color | Color control in the inspector. block.json default: rgba(108,63,181,0.92). Saved as `overlayBg`. |
| Text Color | Color control in the inspector. block.json default: #ffffff. Saved as `textColor`. |
When this is the right block
- Card that reveals hidden content (overlay) when hovered with customizable direction and animation — that is the job of Hover Card, not a generic content block.
- Use it when you need the editor control labeled “Heading”, which exists on this block’s inspector.
- It matches pages about hover, card, overlay.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Hover Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Hover Card”. It sits under Effects. After insert, open Image and set “Heading”, “Reveal Content — Text”, “Show Button”, “Button Label”.
What makes Hover Card different from other Blockenberg blocks?
Card that reveals hidden content (overlay) when hovered with customizable direction and animation. Inspector labels on this block include “Heading”, “Reveal Content — Text”, “Show Button”, “Button Label”.
Is the Hover Card Gutenberg block free?
Yes. Hover Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Hover Card to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Image, Reveal Content, Reveal Effect, Card Size).
Related effects blocks
Content Flip Box
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
Image Reveal
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Spotlight Card
Card with a radial gradient spotlight that follows the mouse cursor on hover.
Flip Card
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Holographic Card
A card with an iridescent holographic foil surface effect that reacts to mouse movement with rainbow shimmer and 3D tilt.
Tilt Card
Card with 3D perspective tilt effect on mouse hover. Rich content with image, heading, text, icon, and link.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Hover Card from the Gutenberg inserter.