Can I fade a background image into another background image in CSS (or even JS)?-CodePudding

Everything I've seen for this basically uses a background image with a linear gradient over the top of it, and that won't work for me:

I have 2 divs with background images that appear next to each other vertically, with, say, 50px of overlap. I would like to make the top 50px of the background image on the second div into a gradient so it fades in from transparent.

Here's the setup to start:

* {
  box-sizing: box-sizing:border-box;
}

div {
  width: 200px;
  height: 200px;
  padding: 10px;
  color: #fff;
}

.one {
  background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/06/picture-0051-300x225.jpg');
}

.two {
  padding-top: 60px;
  margin-top: -50px;
  background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/02/img_1530-large-225x300.jpg');
}

<div >Unimportant content</div>
<div >More unimportant content.</div>

And here's roughly what I want it to look like:

I can't just upload a background image that fades one into the other because the content of the real divs is variable height, and the background needs to change only between the two divs.

CodePudding user response：

mask can do it

* {
  box-sizing: box-sizing:border-box;
}

div {
  width: 200px;
  height: 200px;
  padding: 10px;
  color: #fff;
}

.one {
  background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/06/picture-0051-300x225.jpg');
}

.two {
  padding-top: 60px;
  margin-top: -50px;
  background-image: url('https://stevish.com/wpstevishcom/wp-content/uploads/2009/02/img_1530-large-225x300.jpg');
  -webkit-mask: linear-gradient(#0000, #000 50px);
}

<div >Unimportant content</div>
<div >More unimportant content.</div>

CodePudding user response：

If you want it to stay a little more modular, you can only fade to a specific color (in my example white):

div { height: 300px; width: 500px; background-size: cover; }

div#img1 {
  background-image: linear-gradient(to bottom, transparent, white), url("https://cdn.pixabay.com/photo/2022/08/28/09/40/wild-7416210__340.jpg"); 
}

div#img2 {
  background-image: linear-gradient(to top, transparent, white), url("https://cdn.pixabay.com/photo/2022/08/09/16/19/sea-7375377__340.jpg"); 
}

<div id="img1">Test 1</div>
<div id="img2">Test 2</div>

CodePudding user response：

You can jQuery to do this. You'll need to add id= to your HTML tags. Example

<head>
    <script src="jquery-3.6.0.min.js"></script>
</head>

<div id="uic"  >Unimportant content</div>
<div id="muic" >More unimportant content.</div>

$("uic").stop(true, true).fadeTo(fade_in_time, 1, 
    function(div_id) {
        $("muic").stop(true, true).fadeTo(fade_in_time, 1, 
             function(div_id) 
              {
        
              });
        });
    });
});