Most tutorials I've come across suggest using a background image with a linear gradient overlay, but that solution doesn't suit my needs:
I have two adjacent divs with background images, slightly overlapping by 50px. I wish to create a gradient effect on the top 50px of the background image in the second div, transitioning from transparent.
Here's the initial setup:
* {
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>This is roughly the desired outcome:
https://i.sstatic.net/yuz4e.png
I cannot simply blend two background images together because the divs' content varies in height, and the transition should occur only between these two divs.