Solved

How can I make product text appear when hovering over product image?

ShootsDraws
Shopify Partner
9 0 2

Hi,

 

I would like my product collections to display as images only, until you hover over them - revealing the product title and price in the centre of the image. In order for the text to be legible, I also need a white fill (75% opacity) to overlay the image.  See https://www.palaceskateboards.com/ for reference.

 

Finally, I would like to limit this hover effect to desktop only - mob products should display as normal.

 

Preview link to draft theme: https://2rkk8y02cvehcwwz-65019576489.shopifypreview.com

 

Thanks for any help with this.

 

Accepted Solution (1)
kaiyaa
Excursionist
182 13 19

This is an accepted solution.

Hello @ShootsDraws 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
@media(min-width:768px)
{
.card__content {
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    align-items: center;
    z-index: 999;
    opacity: 0;
}
li.grid__item.scroll-trigger.animate--slide-in:hover .card__content {
    opacity: 1 !important;
}
li.grid__item.scroll-trigger.animate--slide-in:hover .card__media .media img
{
  opacity: 0.4;
}
}
</style>

 If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me

View solution in original post

Replies 6 (6)

kaiyaa
Excursionist
182 13 19

Hello @ShootsDraws 


Do you want to apply hover same as reference in collection grid section?

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
ShootsDraws
Shopify Partner
9 0 2

Hi @kaiyaa 

 

Yeah, that's right. I would like the hover to be active on all collection grid sections across the website - but only for desktop (not mob). Here's an example of how I would like it to look. Thanks!

 

text-hover.jpg

kaiyaa
Excursionist
182 13 19

This is an accepted solution.

Hello @ShootsDraws 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
@media(min-width:768px)
{
.card__content {
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    align-items: center;
    z-index: 999;
    opacity: 0;
}
li.grid__item.scroll-trigger.animate--slide-in:hover .card__content {
    opacity: 1 !important;
}
li.grid__item.scroll-trigger.animate--slide-in:hover .card__media .media img
{
  opacity: 0.4;
}
}
</style>

 If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
ShootsDraws
Shopify Partner
9 0 2

Thanks @kaiyaa that did the trick!

 

I have one issue though - when hovering over products that feature two or more images, both images are visible/overlap (see example below). I don't mind the second image displaying in place of the first one upon hover, but the first image shouldn't be visible at the same time. If you are able to help me fix this, that would be great. Thank you!

 

Here's another preview link if needed: https://5lcdpsof7emfa1io-65019576489.shopifypreview.com

 

Screenshot 2024-04-21 at 23.04.55.png

 

kaiyaa
Excursionist
182 13 19

@ShootsDraws 

Please follow this steps.

1. Open your theme Customization
2. then go this collection.
3. Now on left hand side product-grid section will show open it 
4. Unchecked this checkbox Show second image on hover

kaiyaa_0-1713755098751.png


If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
ShootsDraws
Shopify Partner
9 0 2

Thanks for your help! 🙂