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
  • Views 1.6k
  • 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. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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
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?

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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.