Removing the colour overlay on clickable images but keeping the text

[Hrach]

I want to remove the green overlay that appears on clickable images here https://www.revenueriver.co/sahara/resources-2 

I want to have the text and the Download button, but no overlays on hover.

If someone were to show me how to do that, I'd be very grateful!

Cheers.

[BarryGrennan]

That is a before element on the div class "resource-inner"

So you'd want to add something like this to your css:

.row-fluid .resource-inner:before {
    background: transparent !important;
}

That's a quick and dirty fix.

Cleaner solution is to open up your css file (examining the site the specific file is call Sahara_2017_Style.css) and remove the following:

.row-fluid .resource-inner:before { content:''; position:absolute; top:30px; left:50%; right:50%; bottom:30px; background-color:rgba(10,36,82,0.99);
background: -moz-linear-gradient(-45deg, rgba(10,36,82,0.99) 0%, rgba(10,36,82,0.99) 0%, rgba(43,78,136,0.99) 33%, rgba(44,79,138,0.99) 34%, rgba(43,218,165,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(10,36,82,0.99)), color-stop(0%, rgba(10,36,82,0.99)), color-stop(33%, rgba(43,78,136,0.99)), color-stop(34%, rgba(44,79,138,0.99)), color-stop(100%, rgba(43,218,165,1)));
background: -webkit-linear-gradient(-45deg, rgba(10,36,82,0.99) 0%, rgba(10,36,82,0.99) 0%, rgba(43,78,136,0.99) 33%, rgba(44,79,138,0.99) 34%, rgba(43,218,165,1) 100%);
background: -o-linear-gradient(-45deg, rgba(10,36,82,0.99) 0%, rgba(10,36,82,0.99) 0%, rgba(43,78,136,0.99) 33%, rgba(44,79,138,0.99) 34%, rgba(43,218,165,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(10,36,82,0.99) 0%, rgba(10,36,82,0.99) 0%, rgba(43,78,136,0.99) 33%, rgba(44,79,138,0.99) 34%, rgba(43,218,165,1) 100%);
background: linear-gradient(135deg, rgba(10,36,82,0.99) 0%, rgba(10,36,82,0.99) 0%, rgba(43,78,136,0.99) 33%, rgba(44,79,138,0.99) 34%, rgba(43,218,165,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a2452', endColorstr='#2bdaa5', GradientType=1 );; opacity:0.9; -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; }

If you're removing the colour overlay, bear in mind the text may be less legible on certain images, perhaps consider replacing the green overlay with  a very light semi-transparent black one.

[Hrach]

Thanks @BarryGrennan but your suggestion didn't work for me.

[Kevin-C]

Hey @Hrach 

Try adding this to the css:

.resource-inner:before {
  display: none;
}

[Hrach]

Thanks @Kevin-C - it almost worked! The green overlay has been removed, but I can't see the text and the Download button without the mouse pointing to the image. I know I'm overlooking something simple. 

[Kevin-C · Accepted solution]

Hey @Hrach 

In addition to the code I provided add this:

.row-fluid .resource-box .resource-Isocta {
    top: 50%;
    opacity: 1;
}

[Hrach]

@Kevin-C - yup that’s spot on. Sometimes it’s better not to flex 💪 especially when our audience is a bit digitally fragile!!
Great solution. 

[Kevin-C]

@Hrach Glad we could help!