Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
70
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

Card Overlay

The Card Overlay component shows contextual content on top of a card, image, or bounded container when the user hovers it. Use it to reveal quick actions such as view, open, preview, or edit without changing the underlying card layout.

Use it for:
  • Hover actions: Reveal one or two actions over a card or image.
  • Media previews: Add a view or preview action over visual content.
  • Contextual controls: Keep secondary actions hidden until the user focuses on the item.
  • Bounded overlays: Use ngsCardOverlayContainer so the overlay is positioned and clipped inside the target.

Do not use Card Overlay for popovers, tooltips, menus, loading states, long text, complex forms, or actions that must always be visible.

The NgStarter Angular Card Overlay component lets you reveal overlay content or actions on top of a card-like surface, often on hover or interaction. Use for media cards, galleries, previews, and quick actions over visual content. It includes examples for Basic card overlay, Card overlay with translate, and Card overlay with blur.

Basic card overlay

Use a basic overlay to reveal a quick action over a card or image on hover.

Hover on card to see overlay
Dog BreedShiba Inu
Photo of a Shiba Inu
Hover on image to see overlay

Card overlay with translate

Use the translate effect when the overlay should feel more animated as it appears over the target.

Hover on card to see overlay
Dog BreedShiba Inu
Photo of a Shiba Inu
Hover on image to see overlay

Card overlay with blur

Use blur when the overlay should soften the card or image content behind the action.

Hover on card to see overlay
Dog BreedShiba Inu
Photo of a Shiba Inu
Hover on image to see overlay