Urgent - Price and title appear only when hovering over product images DAWN theme

Store Design
, , , , ,

Topic summary

A Shopify store owner using the Dawn theme wanted product prices and titles to appear as an overlay when hovering over product images on collection pages, similar to a reference site.

Solution Provided:

  • Custom CSS code was shared to add to assets/component-card.css
  • The code creates an overlay effect with centered product information that appears on hover
  • A desktop-only version using @media (min-width: 992px) was provided to prevent the effect on mobile devices

Ongoing Issue:
Multiple users report that after implementing the CSS, clicking on product images no longer works—only clicking the title/price text navigates to the product page. The invisible .card__information overlay blocks clicks to the underlying image. One user claims to have resolved this but didn’t share the solution, leaving others seeking help. No working fix has been posted for the clickability problem.

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

Good morning all,

I have a big design problem on my Shopify site.

I wish the prices of my products would on top of the product image appear when you hover the mouse over the product images on the Product page.

Exactly like on this site: https://aangellenos.com/collections/all

Here is the overview of my current site :

https://elysianclo.store/password
Password: peocki

If you did not understand or if you have questions, do not hesitate! Thank you in advance.

2

Hi @ELYSIAN_CLO

Please add the CSS below the the end of the file: assets/component-card.css in your theme

Let’s see my video: https://take.ms/0ONiN

.product-card-wrapper .card--standard>.card__content .card__information {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  transition: .3s all;
  opacity: 0;
  visibility: hidden;
}
.product-card-wrapper .card--standard .card__inner:after {
  transition: .3s all;
}
.product-card-wrapper:hover .card--standard .card__inner:after {
  z-index: 0;
  background-color: rgba(255,255,255,0.7);
}
.product-card-wrapper:hover .card--standard>.card__content .card__information {
  opacity: 1;
  visibility: visible;
}
1 Like
3

It works! Thank you so much!

Also can you help me with the separator lines at the footer where the Instagram icon is?

4

Can you help me with the mobile layout? I would only like it tone hovering on desktop but it’s hovering on mobile too and I don’t want that

5

Hi @ELYSIAN_CLO

Please use this CSS, it will only affect to desktop layout

@media (min-width: 992px) {
  .product-card-wrapper .card--standard>.card__content .card__information {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    transition: .3s all;
    opacity: 0;
    visibility: hidden;
  }
  .product-card-wrapper .card--standard .card__inner:after {
    transition: .3s all;
  }
  .product-card-wrapper:hover .card--standard .card__inner:after {
    z-index: 0;
    background-color: rgba(255,255,255,0.7);
  }
  .product-card-wrapper:hover .card--standard>.card__content .card__information {
    opacity: 1;
    visibility: visible;
  }
}
6

It worked! Thank you a lot!

7

Hi it worked but now I can’t tap on the image to go to product details to add to car to view product, only tapping on the title works. Is there anyway to fix that?

8

hi @ELYSIAN_CLO

Sorry but I don’t get what you want. could you please explain more?

9

It’s nothing, I figured everything out, thank you for your help!

10

How can i center the price? the product name has option for it but not the price

11

Hey, sorry, I used the code and everything worked fine. The only problem I’m having is that you can only press on the title to get to the product and not on the picture anymore, so you can only access the product if you hover over the image and then press on the title. But I would like my customers to also be able to click on the image to get to the product.

12

Hey how did you figure it out its driving me crazy haha.

13

I asked chat got and he answered this but didnt give a solution that worked:

  • When you click, you’re clicking that invisible .card__information, not the image behind it anymore.
    Unless you click on the title/price, the click doesn’t fire