CODEWITHSUNDEEP
htmlcssweb
somil
somil

Reputation: 360

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

}

Upvotes: 0

Views: 4657

Answers (3)

Virat21
Virat21

Reputation: 134

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%; 
   }

Upvotes: 4

SethGunnells
SethGunnells

Reputation: 1269

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.

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46589

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!

Upvotes: 2

Related Questions