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

user_2418564 0
Viewed 58

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 class="one">Unimportant content</div>
<div class="two">More unimportant content.</div>

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

The two backgrounds fading into each other

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.

linear-gradients css html javascript
3 Answers

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 class="one">Unimportant content</div>
<div class="two">More unimportant content.</div>

user_86203330

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"  class="one">Unimportant content</div>
<div id="muic" class="two">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) 
              {
        
              });
        });
    });
});
user_13369800

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:first-child {
  background-image: linear-gradient(to bottom, transparent, white), url("https://cdn.pixabay.com/photo/2022/08/28/09/40/wild-7416210__340.jpg"); 
}

div:nth-child(2) {
  background-image: linear-gradient(to top, transparent, white), url("https://cdn.pixabay.com/photo/2022/08/09/16/19/sea-7375377__340.jpg"); 
}
<div>Test 1</div>
<div>Test 2</div>

user_65446970
Related