Grow your CSS skills. Land your dream job.

Image fade bottom to transparent

  • # March 5, 2013 at 6:22 am

    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.

    # March 5, 2013 at 6:51 am

    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.

    # March 5, 2013 at 7:17 am

    @Paulie_D – it’s not really a solution to use faded images as it’s retrofitting to around 900 older images unfortunately.

    # March 5, 2013 at 7:28 am

    Still looking but I don’t think it can be done.

    # March 5, 2013 at 7:49 am

    I don’t mind trying out workarounds (e.g. using images, div masks, jquery, etc).

    Just looking for the best option really.

    # March 5, 2013 at 8:08 am

    Can’t find anything specifically on point but I’m betting on a jQuery solution somehow.

    # March 5, 2013 at 8:18 am

    Best I can find but implementation looks like an S.O.B.

    http://thenittygritty.co/css-masking

    # March 5, 2013 at 9:22 am

    Amazing! It’s a tricky workaround for sure but it works perfectly! Thanks a bunch :-)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".