Linear gradient over gallery grid images

Hi everybody

Im using the Hunter template and trying to create a linear gradient over my gallery grid images with a hover effect as well. I can seem to get the hover effect to work, although only to some extend, but have had no luck creating the correct code for the permanent gradient. Im going for the same gradient effect as on this website https://plusdevelopmentgroup.com/ 

My code looks like this at the moment:

img.thumb-image.loaded:before {
  content: '';
  display: block;
  position: absolute;
  height: 85%;
  width: 100%;
  bottom: 0;
  transition: height 0.5s ease-out;
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0, 0.7) 100%);
  transition: background 1s linear;
  transition: linear-gradient 0.5s ease-out;
  opacity: 0.5;
    
}

img.thumb-image.loaded:hover:before {
  height: 100%;
  opacity: 0.5;
   transition: opacity 0.5s ease-out;

}
 

I usually do this sort of thing by setting the image background to contain the gradient and set the image transparency on rollover. 

So, in your example site, the image would initally have full opacity and the rollover would reduce the opacity, allowing the gradient to bleed through. 

I have tried a similar solution but cant seem to get the image background to apply to the individual pictures, only on the entire grit and it not pretty as the padding have the background gradient as well. Do you perhaps have a code I can try out as a model ?

35 minutes ago, JannickB said:

Do you perhaps have a code I can try out as a model ?

Can you provide a link to your site?

Sure. Im still in the process of building it though, but the home page i pretty much as I intend it without the gradient for now 🙂 
Link: violet-gar-ajzh.squarespace.com

Add this to your custom css. 

You'll need to add your gradient and also the transition but the below will work. 

.homepage .slide a{
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    &:hover img {
        opacity: 0.5 !important;
    }
}

If this helps you please hit Like

Hi Colin

Thank you for your answer.

The code creates the effect to a large extend, however the opacity needed (on the images) for the background to shine though makes the images somewhat less attractive and I would really like for them to look their best 🙂 Is it possible to make the background gradient as an overlay or something to get around the need for opacity on the image? 

You could try 

.homepage .slide a{
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    &:hover img {
        mix-blend-mode: multiply;
    }
}

The only problem with that is that mix-blend-mode is not supported on Internet Explorer or Microsoft Edge browser. There are, however, Javascript polyfills available to make it work on those browsers. 

It works perfectly!!! Great solution and thanks about the heads-up with explorer and the polyfills 😄