Dawn theme - hover — custom text - product card

Store Design
, , , ,

Topic summary

Topic: Customize Dawn product cards to show centered text (product info/sizes) revealed on hover, while keeping the product image clickable.

  • Initial state: Custom CSS positioned text on the card but always visible and broke the image link (only title clickable). Screenshots and a reference site were provided; CSS overlay code was central.

  • First fix: Adding hover-based opacity to .card__content successfully revealed text on hover, but the image remained unclickable and text wasn’t centered.

  • Iterations: One suggestion to add code in theme.liquid had no effect; another provided base.css rules (layout tweaks). The requester shared a preview store link for direct inspection.

  • Final update: An updated CSS solution from a helper (exact snippet not shown in the thread) resolved both issues—hover reveal works, text centered, and the product image is clickable again.

  • Outcome: Resolved. No outstanding questions or open items.

  • Notes: Images and code snippets were central to understanding and implementing the solution; the final working code was not fully included in the visible posts.

Summarized with AI on January 12. AI used: gpt-5.
1

Hi all, seeking help on the following to move Create Hover + Reveal Custom Text —> Center on Image Banner

DESIRED EFFECT: https://khaite.com/collections/sale

Screenshot 2023-11-28 at 11.20.40 PM.png
Screenshot 2023-11-28 at 11.20.40 PM.png956×1240 172 KB

PROBLEM: the code I’ve added to CUSTOM CSS, allows the text to be placed on the product card. However, I want this to be revealed on hover instead. This code also prevents the image from being clickable so it does not direct to a product page until the Product Title is clicked.
".card.card–card.card–media.color-scheme-9ddc554f-41d4-40dd-a8af-da0f57f74958.gradient {
position: relative;
}
.card__content {
position: absolute;
bottom: 0;
}"

Screenshot 2023-11-28 at 11.22.52 PM.png
Screenshot 2023-11-28 at 11.22.52 PM.png1742×1356 299 KB

DESIRED GOAL: CENTERED TEXT, PRODUCT INFO/SIZING AVAILABILITY REVEALED ON HOVER

2

Hi @skymochi

You can try to update your code to this version and check again

.card.card--card.card--media.color-scheme-9ddc554f-41d4-40dd-a8af-da0f57f74958.gradient {
position: relative;
}
.card__content {
position: absolute;
bottom: 0;
opacity: 0;
}
.card:hover .card__content {
opacity: 1;
}
1 Like
3

hy, @skymochi
Go to Online Store
2) Edit Code
3) Find theme.liquid file

  1. Add the following code in the bottom of the file above tag.

websensepro_0-1701243748026.png
websensepro_0-1701243748026.png1239×392 200 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

4

Hey Dan,

This worked! However, I’m running into the issue that you can no longer click the image to direct to the product page. You have to click the product title which I feel, isn’t intuitive.

  1. Any solutions to this?
  2. Any solutions to center the Text?
5

Could you drop your store link so I can check and give you the solution?

6

Yes,

https://07f83a.myshopify.com/collections/frontpage
password: koredoko

7

Hi, this didn’t seem to have any effect on my shop!
Is there another code that may mitigate this?

8

past this code in base.css file

.category-product__info__split {
    display: flex !important;
    align-items: center !important;
}
.category-product__right {
    margin: 0px !important;
}
.available-sizes.category-product__sizes {
    text-align: center !important;
}
9

Please update your code to this one and check
1 Like
10

Thanks, Dan, you’re very talented! Works great