Javascript CSS、express和引导：溢出和边距错误

我使用position和overflow属性在图像上堆叠两个圆。 它的工作原理很好，但我有一个圆圈运行在图像的左右两侧（不是顶部和左侧）

图为：

这是CSS

.mainContainer {
  background-color: #A6A4AA
}

.targetImage {
    margin: 0;
    width: 100%;
    height: auto;
    border: solid medium #2C3756;
    border-radius: 0 0 8px 8px;
    background-color: #A6A4AA;
    position: relative;
}

#targetCol {
  overflow: hidden;
  position: absolute;

}

.impact, .ajustement {
  position: absolute;
  background-color: #dc022e;
  border-radius: 100%;
  opacity: 0.75;
  margin: 0;
  width: 100%;
  height: auto;
  border: solid medium #2C3756;

}

.ajustement {
  opacity: 0.5;
}

代码源（ejs+bootstrap）：该行是mainContainer的子行

<div class="row">    <!-- Row : target            -->
  <div class= "col-xs-12" id="targetCol">
    <img id="target" class="targetImage"></img>
    <div id="ajustement" class="ajustement"></div>
    <div id="impact" class="impact"></div>
  </div>
</div>

我怎样才能只在图像中画圆圈，而不超出边界

---

这是我想要的：

你看起来像这样吗：

正文{
保证金：0；
背景色：#A6A4AA
}
.主集装箱{
背景色：#A6A4AA；
利润率：15px自动；
宽度：98%；
}
.目标图像{
保证金：0；
宽度：100%；
高度：自动；
边界半径：0 0 8px 8px；
背景：#A6A4AA；
位置：相对位置；
}
#塔格特科尔{
溢出：隐藏；
位置：绝对位置；
边框：3px实心#2C3756；
线高：0；
边界半径：12px；
}
.影响{
位置：绝对位置；
背景色：#dc022e；
边界半径：100%；
不透明度：0.75；
保证金：0；
宽度：100%；
高度：自动；
边框：3px实心#2C3756；
左-45%；
顶部：-78px；
高度：计算（100%+78px）；
}
.影响{
宽度：20px；
高度：20px；
边框颜色：#000；
左：10%；
排名前10%；
}
A.调整{
不透明度：0.5；
}

你能分享一个图像样本吗？你想把它放在哪里？谢谢你的回答，@kravisingh。我确实在原始帖子中添加了这个图像。