CODEWITHSUNDEEP
htmlcsscss-transitions
ArturoO
ArturoO

Reputation: 611

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 ?

Upvotes: 1

Views: 2988

Answers (1)

Paulie_D
Paulie_D

Reputation: 115045

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>

Upvotes: 6

Related Questions