Hover Overlay on Image Cards

Tailwind CSS

Technical Specification

Image darkens with text appearing centered on hover.

Input/Output Samples

Input:hover

Output:Overlay visible

Optimal Logic Path

<!-- parent: group relative; overlay: absolute inset-0 opacity-0 group-hover:opacity-100 -->

Architectural Deep-Dive

group allows children to respond to parent's hover state.