How to change hover design on gallery images - Debut theme

Pnewton
Excursionist
15 0 9

Hi there,

 

I've looked at a few discussions similar to this, but couldn't find a solution that worked for me. Currently, my gallery images on my site's home page have text overlay and when you hover, the images turn dark grey. I want to change it so instead of hovering and they turn grey, the text is revealed.

 

So I don't want the images to have the text overlay until you hover them. Any help is greatly appreciated! Here's the URL: https://smokingguncoffee.com/

Here's an image for more context:

 

hover icons.PNG

 

Thanks so much!

 

 

Reply 1 (1)
Nick_Marketing
Shopify Partner
846 204 252

Hi,

Try adding this code to the bottom of theme.scss.css (or theme.css)

@media only screen and (min-width: 750px) {
.image-bar__caption {
visibility: hidden;
}
.image-bar__content.image-bar__overlay:hover .image-bar__caption {
  visibility: visible;
}
}

 

- I am an eCommerce and Marketing Technology consultant based in Toronto, CANADA.
- To inquire about consulting work availability, please send me a Private Message.
- For Shopify Tutorials, Subscribe to my YouTube Channel.