Dawn Theme: CSS for Blog Post Title Overlay on Featured Image Hover?

Technical Q&A
, ,

Topic summary

A user working with Shopify’s Dawn theme wanted to modify their blog page (used as a portfolio) so that post titles would be hidden by default and only appear as overlays on featured images during hover.

Initial Request:

  • Blog posts currently display in a grid with titles beneath images
  • Goal: Hide titles initially, show them on hover with semi-transparent overlay
  • User comfortable adding custom CSS

Community Response:

  • One user provided CSS code targeting .card__content and .article-card:hover classes, using absolute positioning, opacity transitions, and rgba background
  • Another user requested store URL for a tailored solution

Resolution:
The original poster resolved the issue independently without implementing the suggested CSS code. The specific solution used was not shared.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi Shopify Community,

I’m using the Dawn theme and I’d like to customize how the blog post titles appear on my main blog page, which I’m using as a portfolio overview.

Currently, the featured image for each blog post is displayed in a grid, and the blog post title appears underneath the image.

I would like to change this so that the blog post title is initially hidden, and only appears (ideally as an overlay on top of the featured image, perhaps with a semi-transparent background) when someone hovers their mouse over the featured image.

Could anyone please help me with the custom CSS code to achieve this effect on the Dawn theme? I’m comfortable adding CSS to the “Custom CSS” section in the theme settings.

Any help or guidance would be greatly appreciated!

1 Like
2

Try this in “Custom CSS”:

.card__content {
  position: absolute;
  bottom: 0;
  opacity: 0;
  transition: var(--duration-long) ease;
  background: rgba(255,255,255,0.6);
}

.article-card:hover .card__content {
  opacity: 1;
}
3

Hello @isacrisp

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

4

UPDATE: I managed to achieve it without needing to add the CSS code, however thanks a lot for the responses!

1 Like