Debut - Collection hover showing original image attribute

Technical Q&A
1

Hi,

By default, it’s darken and when it’s hover it add another dark overlay. I am fine with the darken image but I would like to change it when it’s hover, it will show the original image attribute. I have messed around with the code:

.collection-grid-item__title-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-image-overlay);
  opacity: var(--opacity-image-overlay); }

But I can’t seem to find a way to keep the darken image and when it’s hover it will become the original image. I can only change the color of it which is not what I want. Any help is appreciated.

2

Hi @Godzhand ,

Go to Assets > theme.css and paste this at the bottom of the file:

.collection-grid-item__title-wrapper::before{
	opacity: .74 !important;
}
.collection-grid-item__link:focus .collection-grid-item__title-wrapper::before, 
.collection-grid-item__link:hover .collection-grid-item__title-wrapper::before{
	opacity: .34 !important;
}

Hope it helps!