How to display product title and price on hover in the Dawn theme?

[thunderr]

I want the product title and price to appear only when I hover over the product. Is there any way to do this? I’m using the dawn theme.

[Kani]

Hi @thunderr

you can do it by simply css code

1: Online store > themes > Actions > Edit code > Assets > component-card.css

2: paste code at last

@media screen and (max-width: 749px) {
.card__content {
    opacity: 0;
}
li.grid__item:hover .card__content {
    opacity: 1;
}
}

[thunderr]

Hey, I tried it but it’s not working.

https://852yzluodtrsnwdf-62411505864.shopifypreview.com

That’s my website, can you try and find a solution for me, I would really appreciate it.

[Kani]

oh sorry it’s @thunderr

@media screen and (min-width: 749px) {
.card__content {
    opacity: 0;
}
li.grid__item:hover .card__content {
    opacity: 1;
}
}

[thunderr]

Do i paste it in component-card.css?

[Kani]

yup, just changing the code

[thunderr]

yo, I tried again but nothing’s happening. I appreciate the help a lot, I don’t think anything’s gonna work.

[Kani]

your font color is same as background. how can you see it