KelsieL Posted April 23, 2020 Share Posted April 23, 2020 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! Link to comment
tuanphan Posted April 24, 2020 Share Posted April 24, 2020 Have you solved yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Jareth Posted April 24, 2020 Share Posted April 24, 2020 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.