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

Technical Q&A
, ,
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!

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!