CSS Overlay Patterns

CSS Overlays

Overlays (image captions, hover effects, modal backdrops) are built with a positioned parent and an absolutely positioned child that covers it.

Example

.image-card {
  position: relative;
  overflow: hidden;
}

.image-card img {
  display: block;
  width: 100%;
}

.image-card .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  padding: 1rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.image-card:hover .caption {
  transform: translateY(0);
}

CSS

Full Editor

Pro Tip

Add overflow: hidden to the positioned parent to prevent the overlay from extending outside the card.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned