Jump to content

Adjust positioning of Image Overlay Color on Poster Image Block

Recommended Posts

Site URL: https://www.spicergroup.com/services

On this site, we have used a poster style image block. Someone is asking for the image overlay color of dark blue to not fill the whole image. Essentially, bring the blue overlay down on top, and up on the bottom. So you would see the full color image with a strip of blue going through the middle. Is there code that would help us accomplish this? 

We have utilized custom CSS for the hover effect - that will stay.

The text is in the form of a button with a completely transparent background. We tried to achieve a similar look to what they asked for by changing the image overlay color to 0% opacity, then changed the button color to blue. But they were not happy with the look since the button adjusts to the amount of text (so they were all different sizes) and it does not extend the full width of the image.

 

Thanks in advance!

Screen Shot 2020-04-23 at 10.53.03 AM.png

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

I found this whilst looking for something else. NB - I am not a full-time developer so apologies if it's horsesh1t. 

It's a nice linear gradient. I found this code stopped the links working so you'll have to change the first bit - the class id? (I don't even know what that's called, that's how wet behind the ears I am!)

Good luck!

// Gradient Overlay on Poster Image //

.image-block-v2:before { 
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;  
opacity: 0; }

.image-block-v2:hover:before {
background: -webkit-linear-gradient(to top, #F07C63, #E45372);
background: linear-gradient(to top, #F07C63, #E45372);
opacity: .55;
transition: all .5s ease-in-out; 
}

There's also this: 

https://www.w3schools.com/colors/colors_gradient.asp

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.