element location in CSS animation with different screen displays - html

Question

Project
adding circles that expands when users hover, on an image so it adds interesting animation to it.
Problem
After I was done I realized that depending on the screen display used, the elements (red balls) I put over the image are in different locations. How can I do this so it works on all devices except mobile.
You will get a better idea of what im doing when you see the demo
HTML
<div><img class="tree" title="source: imgur.com" src="http://i.imgur.com/1dDCOyq.png" alt="" />
<div class="circle-top-left">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para">This is where sentence goes</p>
consulting 1
</div>
</div>
</div>
<div class="circle-top-right">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para">This is where sentence goes</p>
consulting 3
</div>
</div>
</div>
<div class="circle-bot-right">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para">This is where sentence goes</p>
consulting
</div>
</div>
</div>
<div class="circle-bot-left">
<div class="circle__wrapper">
<div class="circle__content">
<p class="para">This is where sentence goes</p>
consulting 4
</div>
</div>
</div>
</div>
CSS
.footer_top_holder {
border-top: #17171A solid 8px;
box-shadow: none;
}
/* Home page tree image CSS */
* {
box-sizing: border-box;
}
.tree {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 50px;
margin-top: 50px;
}
.circle-top-left {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
top: 103.5px;
left: 26.3%;
width: 60px;
height: 60px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0 0;
text-align: center;
}
.circle-top-left:hover {
width: 200px;
height: 200px;
padding: 2.5em;
color: transparent;
left: 160px;
top: 45px;
}
.circle-top-right {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
top: 49.5px;
left: 52.5%;
width: 60px;
height: 60px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0 0;
text-align: center;
}
.circle-top-right:hover {
width: 200px;
height: 200px;
padding: 2.5em;
color: transparent;
left: 49%;
top: 35px;
}
.circle-bot-right {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
top: 267.5px;
left: 75%;
width: 60px;
height: 60px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0 0;
text-align: center;
}
.circle-bot-right:hover {
width: 200px;
height: 200px;
padding: 2.5em;
color: transparent;
left: 74%;
top: 215px;
}
.circle-bot-left {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow: hidden;
font-size: 9px;
-webkit-backface-visibility: hidden;
position: absolute;
background: #b20312;
top: 379px;
left: 19.6%;
width: 60px;
height: 60px;
border-radius: 50%;
transition: all .5s ease-in-out;
margin: 0 0;
text-align: center;
}
.circle-bot-left:hover {
width: 200px;
height: 200px;
padding: 2.5em;
color: transparent;
left: 8%;
top: 320px;
}
.circle__wrapper {
display: table;
width: 100%;
height: 100%;
}
.title_subtitle_holder {
display: block;
padding: 30px 0;
position: relative;
}
.circle__content {
display: table-cell;
padding: 1em;
vertical-align: middle;
}
.para {
line-height: 25px;
display: none;
font-size: 15px;
color: white;
text-align: center;
vertical-align: middle;
}
.circle-top-right:hover .para,
.circle-bot-right:hover .para,
.circle-top-left:hover .para,
.circle-bot-left:hover .para {
display: block;
}
.circle-top-right:hover span,
.circle-bot-right:hover span,
.circle-top-left:hover span,
.circle-bot-left:hover span {
display: none;
}
Demo

Answer 1

You can get your element circles to start out on top of the image's circles by replacing your hard-coded left styles with the following:
.circle-top-left {
left: calc(50% - 260px);
}
.circle-top-right {
left: calc(50% + 29px);
}
.circle-bot-right {
left: calc(50% + 275px);
}
.circle-bot-left {
left: calc(50% - 335px);
}
CodePen 1
If you want the circles to always expand in place, replace your hard-coded left and top hover styles with the following:
.circle-top-left:hover, .circle-top-right:hover,
.circle-bot-right:hover, .circle-bot-left:hover {
transform: translate(-90px, -90px);
}
CodePen 2