I’m trying to fade an image to transparency at its base using CSS.
I can achieve it using -webkit-mask-image but then it won’t work in either Firefox or IE which is a problem (though it only needs to work in IE9+).
Here’s the code I have so far: http://codepen.io/djhsecondnature/pen/nIehf
Is there a way to achieve this? It’s important that it’s transparent and not to white as the background behind will be different on different pages.
Can’t be done with Pure CSS…AFAIK.
It is possible, with a pseudo element, to affect the OVERALL opacity of the bg image but not (again AFAIK) apply an ‘opacity gradient’.
If it’s that important, I would suggest a transparent image.
Sometimes an image is the best solution.
@Paulie_D – it’s not really a solution to use faded images as it’s retrofitting to around 900 older images unfortunately.
Still looking but I don’t think it can be done.
I don’t mind trying out workarounds (e.g. using images, div masks, jquery, etc).
Just looking for the best option really.
Can’t find anything specifically on point but I’m betting on a jQuery solution somehow.
Best I can find but implementation looks like an S.O.B.
Amazing! It’s a tricky workaround for sure but it works perfectly! Thanks a bunch :-)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".