Position small images in a circular array around large image - html

Question

I am trying to find a clean way to float multiple image bubbles around a large image in a circular manner.
There will probably be no more than six bubbles per image, but I want to find a recursive and responsive way to position these bubbles around any sized parent image. These parent images will be equal height/width and no lower than 100px. (100 x 100, 130 x 130, ect..)
Not sure how to do this best while making it responsive to the screen size and supported on all main browsers. I also would prefer if this can be done with pure css/sass, and without an external library.
Code so far: http://jsfiddle.net/qatkr261/1/
HTML
<div id="body">
<div id="background">
<div class="company-container">
<img class="company" src="https://placeholdit.imgix.net/~text?txtsize=10&txt=120%C3%97120&w=120&h=120" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
</div>
<div class="company-container">
<img class="company" src="https://placeholdit.imgix.net/~text?txtsize=10&txt=120%C3%97120&w=120&h=120" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
<img src="https://placeholdit.imgix.net/~text?txtsize=10&txt=50%C3%9750&w=50&h=50" class="company-side-bubble" />
</div>
</div>
</div>
CSS (#body and #background are just demo containers)
#body {
height:500px;
width:500px;
}
#background {
background:#F9F9F9;
}
.company-container {
display:inline-block;
padding:20px;
}
.company {
border-radius: 80px;
display: block;
height: 130px;
width: 130px;
margin: 15px auto;
background:#E5E5E5;
}
.company:hover {
transform: scale(1.2);
cursor:pointer;
}
.company-side-bubble {
border-radius: 30px;
width: 40px;
height: 40px;
position:absolute;
top:0;
border: solid 1px red;
}
.company-side-bubble:hover {
transform: scale(1.2);
cursor:pointer;
}
.company-side-bubble:nth-of-type(2) {
margin-top: 15px;
margin-left: 44px;
}
.company-side-bubble:nth-of-type(3) {
margin-top: 34px;
margin-left: 91px;
}
.company-side-bubble:nth-of-type(4) {
margin-left: 109px;
margin-top: 81px;
}

Answer 1

You can do that using percents instead of pixels as unit.
Also you will need to to use translateX and translateY to compensate for the small images width and height.
Here, i have done it for you: http://jsfiddle.net/qatkr261/2/
.company-side-bubble:nth-of-type(2) {
top: 0%;
left: 50%;
transform: translateX(-50%) translateY(25%);
}
.company-side-bubble:nth-of-type(3) {
top: 25%;
right: 25%;
transform: translateX(50%) translateY(-50%);
}
.company-side-bubble:nth-of-type(4) {
right: 0%;
top: 50%;
transform: translateX(-25%) translateY(-50%);
}
.company-side-bubble:nth-of-type(5) {
top: 75%;
right: 25%;
transform: translateX(50%) translateY(-50%);
}
.company-side-bubble:nth-of-type(6) {
bottom: 0%;
left: 50%;
transform: translateX(-50%) translateY(-25%);
}
.company-side-bubble:nth-of-type(7) {
bottom: 25%;
left: 25%;
transform: translateX(-50%) translateY(50%);
}
.company-side-bubble:nth-of-type(8) {
top: 50%;
left: 0%;
transform: translateX(25%) translateY(-50%);
}
.company-side-bubble:nth-of-type(9) {
top: 25%;
left: 25%;
transform: translateX(-50%) translateY(-50%);
}
I have altered also some css on other classes to make it work, most important: .company do not have top:0 anymore and it's margin now is uniform (all four sides equal) and have grown, .company-container lost padding (compensated by .company margin) and gained position:relative
UPDATE:
If you want the bubbles to spread as well you will need to make additional selector for each one as follows:
.company:hover ~ .company-side-bubble:nth-of-type(2) {
top: -5%;
}
.company:hover ~ .company-side-bubble:nth-of-type(3) {
top: 20%;
right: 20%;
}
.company:hover ~ .company-side-bubble:nth-of-type(4) {
right: -5%;
}
...