Fade out a div after X pixels using CSS

[awkward_clam]

I have a DIV that I want to smoothly fade to 0 opacity after 200px . Here’s my current styling:

.faded {
    -webkit-mask-image: -webkit-gradient(linear, left 5%, left bottom, from(rgba(0,0,0,.4)), to(rgba(0,0,0,0)));
}

Above is great for smoothly fading a div from 1 to 0, but I specifically want the opacity to reach 0 after 200px. Can you think of an elegant way to do this? (basically there’s an image in the DIV and client doesn’t want bottom half of image to be visible at all).

Thanks!

[RyanReese]

Is .faded an element that holds content? If so, then just use :before in there and make that width/height (whatever 200px you want it faded after) 200px and absolutely position it in there. That’s how I’d do it.

[ralphm]

@awkward_clam

there’s an image in the DIV and client doesn’t want bottom half of image to be visible at all

You are better off modifying the image itself. this is easy to do in Photoshop. That way, it will work in all browsers, rather than just in the very few browsers that support non-standard -webkit-mask-image.

[awkward_clam]

Sorry - just to clarify.

.faded is a div that holds the image, and we remove the .faded class on a click. Client doesn’t want bottom half of image to be visible pre-click, but wants all of image to be visible post click.

[awkward_clam]

I guess I could just give .faded it’s own height of 200px. For some reason I missed that…