Make A Div Grow In All Directions With CSS?

I have an HTML/CSS page, in which I have 4 divs in the main body shaped like circles. I've made it so these divs' size grow on hover. This works fine except for some cases where it

Solution 1:

Simple, just use CSS3.

#circ1:hover {
  -webkit-transform: scale(1.5); 
      -ms-transform: scale(1.5); 
          transform: scale(1.5);
}

This code will grow divs. for margin

   #circ1:hover + #circ2{
   margin: 100px 0px 100px 8%; 
   }

Solution 2:

You're very close; you already have the relative positioning. Now all you need to do is move the top left corner of the div up and to the left.

Since the size on hover is 100px larger, you will need to move the div by 50px (half that).

#circ1:hover {
  width: 250px;
  height: 250px;
  top:-50px;
  left:-50px;
}

That's all!

Solution 3:

See if CSS3 Transforms get you what you want. You'll need some vendor prefixes and, but as long as you're not trying to support IE 8 and under, you should be able to get away with it.

You'll want to use scale. There are also 3D transforms, but they're less supported.