Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
JannickB

Linear gradient over gallery grid images

Question

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;

}
 

Share this post


Link to post

8 answers to this question

Recommended Posts

  • 1

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

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. 


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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. 


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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 ?

Share this post


Link to post
  • 0
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?


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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? 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...