元件位置显示

Question

项目

添加圆圈当用户将鼠标悬停所以它增加了有趣的动画它，膨胀，在图像上。

问题

我被完成后我意识到，取决于所使用的屏幕显示上，元件（红球）我把在图像是在不同的位置。我该如何做到这一点，因此它适用于除手机之外的所有设备。

您将获得什么IM做一个更好的主意，当你看到演示

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> 
&nbsp; 
<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> 
&nbsp; 
<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> 
&nbsp; 
<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> 
&nbsp; 

</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

您可以通过更换您的硬编码left风格让你的元素的圈子，开始了对图像的圈顶部的下列内容：

.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

如果你想圆总是在地方扩大，用下面的更换硬盘编码left和top hover样式：

.circle-top-left:hover, .circle-top-right:hover, 
.circle-bot-right:hover, .circle-bot-left:hover { 
    transform: translate(-90px, -90px); 
} 

CodePen 2