Show product name and price on hover

Store Design
, , , ,
1

Hello,

I would like to show the price and name of my product on hover. I would also like the hover to be a little bit blurry/faded as seen in the website link attached.

I am using the spotlight theme.

Example of what i want - https://shop.palaceskateboards.com/

Website: geffcori.com

password: geffdoe

Thank you

2

hello,

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.product-card:hover {
    filter: blur(2px); /* Hover effect ko blurry karein */
}

.product-card:hover .product-details {
    opacity: 1; /* Name aur price ko visible karein */
}

.product-details {
    opacity: 0; /* Pehle hidden rakhein */
    transition: opacity 0.3s ease; /* Smooth transition effect */
}

Thanks!

3

Hi,

Thank you for getting back to me. Unfortunately, your ode does not work.

Are there any other ways?