Jump to content

Linear gradient over gallery grid images

Recommended Posts

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;

}
 

Link to comment
  • Replies 8
  • Created
  • Last Reply

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. 

If you're looking for a Squarespace Developer, drop me a line
Also, you might want to check out my Squarespace template finder

Link to comment

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 ?

Link to comment

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

If you're looking for a Squarespace Developer, drop me a line
Also, you might want to check out my Squarespace template finder

Link to comment

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? 

Link to comment

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. 

If you're looking for a Squarespace Developer, drop me a line
Also, you might want to check out my Squarespace template finder

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.