How to change hover design on gallery images - Debut theme

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:

Here's an image for more context:


hover icons.PNG


Thanks so much!



Reply 1 (1)
Shopify Partner
848 204 253


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.