How to make product description appear on hover

Hello!

I found this code that hides the product title and makes it appear upon hovering over the product image. I'm hoping there's a way to similarly make the product description appear upon hovering over the product image.

{.products.collection-content-wrapper .grid-item img{z-index: 0!important}

.products.collection-content-wrapper .grid-main-meta  {z-index: 99!important; margin-top:-5rem; text-align:center; background: rgba(255,255,255,0.5); visibility:hidden; }

.grid-main-meta *{color:black!important;}

.products.collection-content-wrapper .grid-item:hover .grid-main-meta {visibility:visible}}

Thank you!

Hi. Not possible. Product description doesn't appear on List Page, so there is no way to do hover effect with it.

I think I have the same issue. Just to confirm, there's NO way to add a hover to a product title? I tried this:

.grid-title:hover { font-weight: 900!important;} and it doesn't work. 

It DOES work to add a background color or underline to the entire item, but that's now what I'm going for:

a.grid-item-link:hover {border-bottom: solid 2px #dddddd!important;}

Here's the page I'm referring to: https://studio411salon.com/haircare.

Thanks!

On 4/1/2022 at 2:46 AM, nwhittlesey said:

I think I have the same issue. Just to confirm, there's NO way to add a hover to a product title? I tried this:

.grid-title:hover { font-weight: 900!important;} and it doesn't work. 

It DOES work to add a background color or underline to the entire item, but that's now what I'm going for:

a.grid-item-link:hover {border-bottom: solid 2px #dddddd!important;}

Here's the page I'm referring to: https://studio411salon.com/haircare.

Thanks!

I meant no way to add description appear on hover

If you want to add overlay/title/price appear on hover, it is possible

and you want? Description or?