How to make some part to overflow and some hidden from a div container?

Issue

I have a parent container and 3 sub containers. I want the overflow of colured circle divs to be hidden (which i am able to achieve) but overflow of img to be visible. Below is the code i have tried. Any help would be highly appreciated.

.container {
  height: 300px;
  width: 300px;
  margin-top: 50px;
  background-color: black;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.subContainer1 {
  position: absolute;
  top: -50px;
  left: 90px;
  overflow: visible;
  background-color: red;
  width: 110px;
  height: 110px;
  z-index: 3;
}

.imgContainer {
  width: 90px;
  height: 90px;
  z-index: 4;
}

.blueCircle {
  height: 100px;
  width: 100px;
  border-radius: 100px;
  background-color: #3D1CC4;
  position: absolute;
  top: -50px;
  left: 0;
  z-index: 2;
}

.greenCircle {
  height: 100px;
  width: 100px;
  border-radius: 100px;
  background-color: greenyellow;
  position: absolute;
  top: -50px;
  right: 0;
  z-index: 2;
}

<div class="container">
  <div class="subContainer1">
    <img src="https://picsum.photos/200" alt="random img" class="imgContainer">
  </div>
  <div class="blueCircle"></div>
  <div class="greenCircle"></div>
</div>

Solution

You can achieve this but you might need to change a bit your layout. Because your container wrapper has overflow:hidden all of its element will be hidden and cannot overlap.

In this case you need to remove the overflow: hidden from your container wrapper and create two divs to wrap your circles and add overflow: hidden on them. Here I did what I mentioned, hope that helps.

.container {
  position: relative;
  height: 300px;
  width: 300px;
  margin-top: 50px;
  background-color: black;
  position: relative;
  /* overflow: hidden; */
  z-index: 10;
}

.subContainer1 {
  position: absolute;
  top: -50px;
  left: 90px;
  overflow: visible;
  background-color: red;
  width: 110px;
  height: 110px;
  z-index: 3;
}

.imgContainer {
  width: 90px;
  height: 90px;
  z-index: 4;
}

.circle-container.blue { 
    position: absolute;
    height: 100px;
    width: 100px;
    overflow: hidden;
    top: 0;
    left: 0;
}

.blue-circle {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background-color: #3D1CC4;
  z-index: -1;
  position: absolute;
  top: -50px;
  left: 0;
  z-index: -1;
}

.circle-container.green {
    position: absolute;
    height: 100px;
    width: 100px;
    overflow: hidden;
    top: 0;
    right: 0;
}

.green-circle {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background-color: greenyellow;
  z-index: -1;
  position: absolute;
  top: -50px;
  right: 0;
}

<div class="container">
  <div class="subContainer1">
    <img src="https://picsum.photos/200" alt="random img" class="imgContainer">
  </div>
  <div class="circle-container blue">
    <div class="blue-circle">
    
    </div>
  </div>
  <div class="circle-container green">
    <div class="green-circle">
    
    </div>
  </div>
</div>

Answered By - Coolis