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

Adjust positioning of Image Overlay Color on Poster Image Block


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

Share this post

Link to post

2 answers to this question

Recommended Posts

  • 0

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: 


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