Dawn theme, how to hover the collection name on the image?

Shopify Discussion

Topic summary

A user working with Shopify’s Dawn theme wants to center collection names over images in the collection-list section without affecting the featured-collection section’s product layout.

Initial Problem:

  • Modifying component-card.css centered collection names but also unintentionally centered product information in featured collections
  • Both sections share the same CSS file, causing conflicts

Solution Provided:

The original poster solved this by:

  1. Adding a new <div> with class centered_title_onImg in card-collection.liquid after the image div
  2. Creating custom CSS styling in component-card.css for this new class, using absolute positioning (top: 50%, left: 50%, transform: translate) to center the title over the image
  3. Including screenshot showing the working result

Follow-up Questions:

  • One user asks how to achieve similar collection name overlay styling
  • Another asks whether the solution makes only the text clickable or the entire image clickable

The discussion remains open with unanswered implementation questions about clickability and replication of the solution.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am using the latest Dawn theme. When I used the collection-list section, I tried to make the collection name center. I modified the Assets/component-card.css file. I added the margin-left and margin-right argument in the card__inner. But then I found out that in the featured-collection section, the product name and information also got centered. I then realized they shared the same css style in the component-card.css.

If I want to center the the collection name and even hover the name onto the image without affecting the featured-collection section, what should I do?

Many thanks,

Elsie

.card--card,
.card--standard .card__inner {
  position: relative;
  /* margin-left: auto;
  margin-right: auto; */
  box-sizing: border-box;
  border-radius: var(--border-radius);
  border: var(--border-width) solid rgba(var(--color-foreground), var(--border-opacity));
}
2

My solution was:

Step 1:

In Snippets/card-collection.liquid, I added a div after the image’s div. I gave the div a class called centered_title_onImg.

{%- if card_collection.featured_image -%}
        
          

            
          

          
            
              
          

        

        
      {%- endif -%}

Step 2:

In Assets/component-card.css, I added the centered_title_onImg style after the card__media, which controls the position and background-color of the title on the image:

.card__media .media img {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.card__inner:not(.ratio) > .card__content {
  height: 100%;
}
/* New added */
.centered_title_onImg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
/*   background-color: #F7F7F7; */
}

The result was like(I didn’t delete the original card__heading, just for testing):

ElsieL_1-1675976166480.png
ElsieL_1-1675976166480.png1097×660 593 KB

3

can you please let me know how can i get the collection name like this on the image

Screenshot (2).png
Screenshot (2).png1366×768 301 KB

4

Hi @Elsie-L ,

With that solution can you click the image or only the text??

Thanks