ArturoO ArturoO - 4 months ago 38
CSS Question

Expand absolute positioned circle from center

I have absolute positioned div which represents a circle thru rounder borders. I need to expand this circle when hover event occurs for the div, the problem is that the circle expands to the right/bottom direction and I need it to expand from the center. This off course occurs because the top/left parameters have fixed values, I managed to overcome this using negative top/left margin. The final issue is that I want to add smooth transition from normal state to expanded, and this gives bad results. HTML code:

<div class="circle"></div>


CSS code:

.circle {

position: absolute;
left: 150px;
top: 150px;
border: 5px solid #000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 40px;
height: 40px;
margin-left: -20px;
margin-top: -20px;
-webkit-transition: width 0.5s, height 0.5s;
-moz-transition: width 0.5s, height 0.5s;
-o-transition: width 0.5s, height 0.5s;
transition: width 0.5s, height 0.5s;
}
.circle:hover
{
width: 60px;
height: 60px;
margin-left: -30px;
margin-top: -30px;
}


Working example: https://jsfiddle.net/ArturoO/4qLr0tc2/5/

If you remove the transition rules, then it will work but I need the animation to occur. Any ideas ?

Answer

Use a translation transform instead of margins

.circle {
  position: absolute;
  left: 150px;
  top: 150px;
  border: 5px solid #000;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}
.circle:hover {
  width: 60px;
  height: 60px;
}
<div class="circle"></div>

Comments