Round div with child div at the axis - html

Question

Hi I have a design i'm trying to recreate using html and css
and this is what i have been able to create so far
this is my html structure
1:
my current html structure looks like with the round borders . when i try to position the inner div at the edges of the round border as in the design the
inner div images get cut. please can you help me fix this
thanks
<div id="container">
<div id="tshirt">image</div>
<div id="tshirt">image</div>
<div id="bag">image</div>
</div>

Answer 1

This should get you started.
.outercircle {
height: 500px;
width: 500px;
border-radius: 100%;
border: 2px dashed purple;
margin: 10% auto;
position: relative;
}
.item {
padding: 10px;
background: purple;
position: absolute;
transition: background .2s;
}
.item img {
border-radius: 100%;
}
.item-1 {
top: 50%;
left: -50px;
transform: translateY(-50%);
}
.item-2 {
top: 50%;
right: -50px;
transform: translateY(-50%);
}
.item-3 {
left: 50%;
top: -50px;
transform: translateX(-50%);
}
.item-4 {
left: 50%;
bottom: -50px;
transform: translateX(-50%);
}
.item:hover {
background: black;
}
<div class="outercircle">
<div class="item item-1">
<img src="http://placehold.it/100x100" alt="" />
</div>
<div class="item item-2">
<img src="http://placehold.it/100x100" alt="" /></div>
<div class="item item-3">
<img src="http://placehold.it/100x100" alt="" /></div>
<div class="item item-4">
<img src="http://placehold.it/100x100" alt="" /></div>
</div>