user3299251 user3299251 - 16 days ago 6
CSS Question

CSS Image to transparant

I want to create a background image which will flow into transparency.

I've found a lot of ways to put a gradient on a background image and that is working and all but i can't find how to let a image go to transparency. I even doubt if it is possible.

So again, i'm not looking for a gradient OVER a image but the image itself should be the gradient. I did find a way with a mask but that would make the whole div go from visible to invisible incl. everything in that div.

Would love some help! Thanks in advance.

Answer

You can use webkit-mask-image. Check Mozilla Developer network:

https://developer.mozilla.org/en/docs/Web/CSS/mask-image

Browser Support for webkit-mask:

http://css3clickchart.com/#masks

Check JS Fiddle

Code:

content: "";
  background: url(https://images-na.ssl-images-amazon.com/images/G/01/img16/pet-products/vertical-store/promo-tiles/short-tile/32445_petsproducts_march-pets-site-flip-vertical-store_9_short-tile_592x304._CB299747463_.jpg) ;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))