Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
GET NGSTARTER

Card Overlay

Meet Card Overlay for Angular – a sleek, interactive component that transforms the way users engage with your UI. Whether you need smooth hover effects, dynamic action buttons, or immersive content reveals, this component delivers a modern touch with effortless customization.

Key features:
  • Elegant Animations – Hover, click, or focus to reveal stunning overlays.
  • Fully Customizable – Adjust styles, content, and interactions to fit your brand.
  • Seamless Integration – Works flawlessly with and Tailwind.
  • Performance Optimized – No lag, no clutter—just smooth transitions.

Upgrade your Angular app’s UX today with Card Overlay—because static UI is so last season. 🚀

Basic card overlay

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

Card overlay with translate

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

Card overlay with blur

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

API Reference

ngsCardOverlayContainer directive - a container of an overlay.

ngs-card-overlay component - overlay content.

Properties for the ngs-card-overlay component.

PropTypeDefault
withTranslate
Adds hover animation for an overlay
booleanfalse
withBlur
Adds blur to the background for an overlay content
booleanfalse