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!

Have you solved yet?

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