CSS
CSS Grid: Overlapping Image and Text Cards
Design modern, eye-catching cards by precisely overlapping text content over an image using CSS Grid's stacking capabilities with `grid-area` and `z-index`.
.card-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr; /* Ensures all direct children occupy the same grid area */
width: 350px; /* Example width */
height: 250px; /* Example height */
overflow: hidden;
position: relative; /* For z-index context */
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
.card-image {
grid-area: 1 / 1 / 2 / 2; /* Occupy the entire grid area */
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.card-content {
grid-area: 1 / 1 / 2 / 2; /* Also occupy the entire grid area, overlapping the image */
z-index: 2; /* Place content above the image */
display: flex;
flex-direction: column;
justify-content: flex-end; /* Align content to the bottom */
padding: 1.5rem;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
color: white;
text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.card-content h3 {
margin-top: 0;
margin-bottom: 0.5rem;
font-size: 1.5rem;
}
.card-content p {
margin: 0;
font-size: 1rem;
}
How it works: This snippet creates a card layout where text dynamically overlaps an image. By setting `display: grid` and `grid-template-columns: 1fr; grid-template-rows: 1fr;`, all direct children are made to occupy the exact same single grid cell. The `.card-image` is placed at `z-index: 1`, while the `.card-content` is placed at `z-index: 2`, ensuring the text appears on top. A `linear-gradient` is used for the text background to provide better readability, creating a modern and engaging UI component.