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 goes to the next line and when the browser window is various sizes (still trying to work that out). However, the thing I am trying to do is make it so when the div grows on hover, it grows in all directions rather than growing to the right and down as it is currently doing. Does anyone know the fix for this? 

Here is a link to a sitepage: <http://www.somil.site90.net>

Here is the code for one of the circles. The other 3 are identical except for the margins, but let me know if you want me to paste those as well. Thanks in advance!

```
#circ1 {
  background: #c4c4c4;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  position: relative;
  margin: 100px 0px 100px 16%;
  float: left;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  transition: all 500ms ease-in-out;

}

#circ1:hover {
  width: 250px;
  height: 250px;

}

```