Linear gradient for 2 images

Question

Can I make linear gradient for 2 images (left-right or top-bottom)?

Answer 1

Yes I agree with @Sami Khan
Use mix-blend-mode
You can also use background-blend-mode
https://code.sololearn.com/WyQAhEjmGpQq/?ref=app

Answer 2

What do you mean by linear gradient for images? Explain in detail.

Answer 3

try it.. if you face problem let us know.. and add your code here

Answer 4

try using mix-blend-mode

Answer 5

Succeeded partially:) but that’s not the real gradient I wanted, just gradient over the images.
My goal was like this:
http://photoshop.cod3sun.com/uploads/1207767335_peretekanie_odnogo_izobrazhenia_v_drugoe4.jpg

My code at the moment.

html:

<div><div id="grad"></div></div>

css:

/*images*/

div {
float: left;
width: 300px;
height: 600px;
color: #FFF;
background-image: url("http://static2.grsites.com/archive/textures/misc/misc280.jpg"), url("http://static1.grsites.com/archive/textures/misc/misc283.jpg");
background-position: right bottom, left top;
background-repeat: no-repeat;
}

/*gradient*/

#grad
{
position: relative;
width: 300px;
height: 600px;
background:linear-gradient(rgba(255,255,255,0), white, rgba(255,255,255,0));
}