In your opinion, what is the best way to merge two different images making a "fade" effect using css.
For example this is the effect that I want to create.
Imagine that we have two images, one is this vanilla color and another is the coffee image.
The first thing I put one by side with div, but I do not know how can I create this effect. Anyone have an idea how can I do that?
Here I created a Codepen for that, you can see that I have one image that is blue, and I want to create the same effect in the right image: https://codepen.io/fernandocacavaio/pen/vYKEXPo
<html>
<head></head>
<body>
<div style="width: 100%;">
<div class="left">
Left Div
</div>
<div class="right">
Right Div
</div>
</div>
</body>
</html>
.left {
width: 50%;
height: 350px;
float: left;
background-image: url('https://i.ibb.co/7SKNPWz/blue-background.jpg');
background-repeat: no-repeat; background-size: 100%;
}
.right {
height: 350px;
background-image: url('https://i.ibb.co/SfnB3hs/Capture.jpg');
}
}
