Overlaying an Image between two background colors in CSS

Question

My html is like

<div style='bg-gray'>
</div>
<img src='sample.png'>
<div style='bg-white'>
</div>

my css is like

.bg-gray{
  background-color:gray;
}
.bg-white{
  background-color:white;
}

How can I make an image overlay between two colors like the sample image?

Answer 1

I've created a simple example for you. I did the following

Changed style= to class= style is only used for inline styles. I added the class .block to the divs so you can target them together

I moved the img to the first block so you can set it relative to that container (also why I added position: relative to the .block class

After that I absolutly position the image relative to it's parent. Because i know the image is going to be 150px height I can give it bottom: -75px to place it halfway. Then I've added left: 50%; transform: translatex(-50%); to position in the abosolute middle of the container.

z-index: 2; is so it comes behind the second .block

.block {
  width: 100%;
  height: 300px;
  position: relative;
}

img {
  position: absolute;
  bottom: -75px;
  z-index: 2;
  left: 50%;
  transform: translatex(-50%);
}

.bg-gray{
  background-color:gray;
}
.bg-white{
  background-color:white;
}

<div class='block bg-gray'>
  <img src='https://via.placeholder.com/150'>
</div>
<div class='block bg-white'>
</div>

Answer 2

Please use :after Selector :-

.container{ padding:50px; height:300px;display: flex; justify-content: center; align-items: center; position:relative; z-index:5;}
.image-card{ position:relative;background:rgba(0, 0, 0, 0.3); text-align:center;}
.image-card:before{content:''; position:absolute; left:0px; width:100%; background:#99FFCC; height:50%; bottom:0px;}

<div class="image-card">
<div class="container"><img src='' width="200" height="200" style="background:#00CCFF;"></div>
</div>