Css image absolute position on top of responsive image - html

Question

How do I keep the balloon image position stick to the grid image as you resize it?
Balloon1 and B2 are actually inside grid 5 and 7 but if you resize left right, the Balloons will offside.
Do I need a special calc or javascript / jquery library for that?
Thanks.
updated fiddle
.container{
max-width:600px;
max-height:400px;
}
.image-container{
width:70%;
float:left;
position:relative;
}
.img-grid{
max-width:100%;
max-height:100%;
}
.balloon{
position:absolute;
left:30%;
top:50%;
}
.balloon2{
position:absolute;
left:60%;
top:15%;
}
Resize this area
<div class= "container">
<div class="image-container">
<img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
<img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
<img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
</div>
<div class="text-container">
</div>
</div>

Answer 1

Use media queries at say four points throughout the resize, i.e.
#media only screen and (max-width: 600px) {
img{width:60%;height:auto;}
}
Just play about with the image width.

Answer 2

You have to decrease size of the balloons when image gets smaller.
In order to do that you can set ballons width in percentages.
.container{
max-width:600px;
max-height:400px;
}
.image-container{
width:70%;
float:left;
position:relative;
}
.img-grid{
max-width:100%;
max-height:100%;
}
.balloon{
position:absolute;
left:30%;
top:50%;
width: 6%;
}
.balloon2{
position:absolute;
left:60%;
top:15%;
width: 6%;
}
Resize this area
<div class= "container">
<div class="image-container">
<img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
<img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
<img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
</div>
<div class="text-container">
</div>
</div>

Answer 3

Here is updated fiddle.
Hope this is what you were looking for. I have set the image width to 8% so as to resize when screen is resized.
.container{
max-width:600px;
max-height:400px;
}
.image-container{
width:70%;
float:left;
position:relative;
}
.img-grid{
max-width:100%;
max-height:100%;
}
.balloon{
position:absolute;
left:30%;
top:50%;
width: 8%;
}
.balloon2{
position:absolute;
left:60%;
top:15%;
width: 8%;
}
Resize this area
<div class= "container">
<div class="image-container">
<img class="img-grid" src="https://image.ibb.co/hFUHdz/example18.png" />
<img class="balloon" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
<img class="balloon2" src="https://image.ibb.co/b445WK/tkp_5_balloonpop.png"/>
</div>
<div class="text-container">
</div>
</div>