0

Linear gradient for 2 images

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

11th Dec 2017, 5:37 AM
Michael Butovski
Michael Butovski - avatar
5 Respuestas
+ 11
Yes I agree with @Sami Khan Use mix-blend-mode You can also use background-blend-mode https://code.sololearn.com/WyQAhEjmGpQq/?ref=app
11th Dec 2017, 9:48 AM
Swapnil Srivastava
Swapnil Srivastava - avatar
+ 7
What do you mean by linear gradient for images? Explain in detail.
11th Dec 2017, 7:25 AM
Swapnil Srivastava
Swapnil Srivastava - avatar
+ 3
try it.. if you face problem let us know.. and add your code here
11th Dec 2017, 6:03 AM
Мг. Кнап🌠
Мг. Кнап🌠 - avatar
+ 2
try using mix-blend-mode
11th Dec 2017, 9:42 AM
Мг. Кнап🌠
Мг. Кнап🌠 - avatar
+ 1
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)); }
11th Dec 2017, 9:05 AM
Michael Butovski
Michael Butovski - avatar