CSS Image to transparent

Question

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.

possible duplicate of http://stackoverflow.com/questions/19713813/fade-image-to-transparent-like-a-gradient — Kilian Stinson, Nov 22 '16 at 08:56
@KilianStinson That's why i described my problem with "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." It's that example that i used but as you can see there the text etc. is also become transparant. That's the problem with that solution. — user3299251, Nov 22 '16 at 11:37

score 0 · Accepted Answer · answered Nov 22 '16 at 09:26

0

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)))

answered Nov 22 '16 at 09:26

Veer

166
1
1
16

Correct. This is exactly what i am looking for but using a mask will make everything in that div transparant. So yes, this is what i am looking for but i need everything looking normal in the div itself. Here you can see the text also fading. – user3299251 Nov 22 '16 at 11:38
Nevermind This is the answer! Just change the z-index of the overlaying text/content and it's just like i wanted it. – user3299251 Nov 22 '16 at 11:43

score 0 · Answer 2 · edited May 23 '17 at 12:24

Can be done however you may run into some problems with cross browser support.

See older answer on stack overflow

-webkit-mask-image:-webkit-gradient(linear, left top, left bottom,from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

<html>
  <style type='text/css'>
    div, img { position:absolute; top:0; left:0; width:250px; height:250px; }
    img {
      -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))
    }
  </style>
  <body>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div>
    <img src='http://verysmartbrothas.com/images/random.jpg?9fe95b' />
  </body>
</html>

Correct. This is exactly what i am looking for but using a mask will make everything in that div transparant. So yes, this is what i am looking for but i need everything looking normal in the div itself. Here you can see the text also fading. — user3299251, Nov 22 '16 at 11:39

CSS Image to transparent

2 Answers2