Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image fade bottom to transparent

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #43154

    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.

    #127007
    Paulie_D
    Member

    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.

    #127010

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

    #127013
    Paulie_D
    Member

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

    #127022

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

    Just looking for the best option really.

    #127024
    Paulie_D
    Member

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

    #127026
    Paulie_D
    Member

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

    http://thenittygritty.co/css-masking

    #127044

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.