Transparent Overlay on an Image

This example shows how to create a semi-transparent overlay on top of an image using background opacity. This is common for hero sections or image captions.

Scenic landscape

Overlay Title

This text is on top of the semi-transparent overlay and remains fully opaque, making it easy to read.

Application: This technique is useful for image headers, cards with text over images, or modal backgrounds.

The overlay uses bg-black/75 which is a Tailwind CSS shorthand for setting a black background with 75% opacity. The text and button within the overlay remain fully opaque.