7.1 Product Grid: Show Title / Price on Hover

Site URL: https://tuna-ladybug-3hgy.squarespace.com/shop

Wondering if anyone can help me discover how to reveal the title and price of a product when a user hovers over the product image. 

Page: https://tuna-ladybug-3hgy.squarespace.com/shop

Pass: brineintopedro

On 3/11/2021 at 8:29 PM, jdillagodzilla said:

Site URL: https://tuna-ladybug-3hgy.squarespace.com/shop

Wondering if anyone can help me discover how to reveal the title and price of a product when a user hovers over the product image. 

Page: https://tuna-ladybug-3hgy.squarespace.com/shop

Pass: brineintopedro

Hi. Add to Design > Custom CSS

/* Product hover effect */
.products.collection-content-wrapper .grid-meta-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100% !important;
    text-align: center !important;
    opacity: 0;
    transition: all 0.5s;
}
.products.collection-content-wrapper .grid-meta-wrapper .grid-main-meta {
    width: 100%;
    opacity: 0;
}
.products.collection-content-wrapper .grid-item:hover .grid-main-meta {
    opacity: 1;
}

Thank you @tuanphan

I ended up going with the following code as the above didn't give me quite the effect I was goin for.

/* Hide Price */
.products.collection-content-wrapper .grid-main-meta .grid-prices {
  visibility:hidden!important;
}

/* Reveal Price */
.products.collection-content-wrapper .grid-item:hover .grid-main-meta {
.grid-prices {
  visibility:visible!important;
}
}

On 3/21/2021 at 2:02 AM, tuanphan said:

Hi. Add to Design > Custom CSS

/* Product hover effect */
.products.collection-content-wrapper .grid-meta-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100% !important;
    text-align: center !important;
    opacity: 0;
    transition: all 0.5s;
}
.products.collection-content-wrapper .grid-meta-wrapper .grid-main-meta {
    width: 100%;
    opacity: 0;
}
.products.collection-content-wrapper .grid-item:hover .grid-main-meta {
    opacity: 1;
}

 

Thanks for the code, but I can't open the product on the title. 
& it's possible to add a blur background with a custom size/font title ? 

Thanks !

On 7/6/2021 at 5:08 AM, idflow said:

Thanks for the code, but I can't open the product on the title. 
& it's possible to add a blur background with a custom size/font title ? 

Thanks !

Can you share link to product grid on your site? We can take a look

is there anyway to use this code and put a white background behind the text hover with a slight transparency 

12 hours ago, NorthernEd said:

is there anyway to use this code and put a white background behind the text hover with a slight transparency 

white behind text only or white behind text + cover whole image?