CSS linear opacity

Question

I want to create some flat-UI-like blocks but I need a little help. I got through some guides with linear-gradient(to left, rgba(255,255,255,0) ,rgba(255,255,255,1)); and so on, but I have't found what I actually need.

Is there any way, how to do any layer with linear opacity? I have quite huge database of images, (so I definitely can't photoshop them to have opacity by itself), and I am loading it into many "div" as a background-image. But I need to make the divs to start beeing transparent in about 75% of its width.

Is it somehow possible in CSS?

There is what I need to achieve:

Answer 1

You can set a linear gradient background with an extra stop to make an element transparent for 75% of its width, then linearly increase opacity.

For example:

background: linear-gradient(
   to right, 
   rgba(0,0,0,1) 0%,
   rgba(0,0,0,1) 75%,
   rgba(0,0,0,0) 100%
);

This makes an element have an opaque black (the three first rbga values) background for 75% of its width, then linearly transition to transparent in its rightmost 25%.

Answer 2

I'm afraid something like that is not possible using CSS. Since you have many images, and provided you don't show too many of them at once, you can consider using canvas to render the opacity to each image:

http://jsfiddle.net/u256zkha/