0
Linear gradient for 2 images
Can I make linear gradient for 2 images (left-right or top-bottom)?
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
+ 7
What do you mean by linear gradient for images? Explain in detail.
+ 3
try it.. if you face problem let us know.. and add your code here
+ 2
try using mix-blend-mode
+ 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));
}