Make a div grow in all directions with CSS?

Question

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;

}

CSS3 scale is better option for doing this.

Tushar
– Tushar

2014-07-12 17:38:09 +00:00
Commented Jul 12, 2014 at 17:38 — Tushar
– Tushar, Commented Jul 12, 2014 at 17:38

Virat21 · Accepted Answer · 2014-07-12 17:56:56Z

4

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

edited Jul 12, 2014 at 17:56

answered Jul 12, 2014 at 17:25

Virat21

1341 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

somil Over a year ago

Great! Only one thing. When I use scale, the margins stay stagnant, so the other divs don't interact with each other as I want them to. Is there anyway to make the margins move as the object scales?

T J Over a year ago

@drsom I don't think anyone can go any further than this with the info shared. If you're looking for a solution that works perfectly with whatever you've, then please include a minimal demo such as jsfiddle or the code required to reproduce the same and explain the desired behaviour.

Virat21 Over a year ago

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

Mr Lister · Accepted Answer · 2014-07-12 17:24:45Z

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!

answered Jul 12, 2014 at 17:24

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

1 Comment

somil Over a year ago

Very cool, but is there anyway to make it so the div doesn't 'flash' up and to the left because the smooth transition doesn't seem to be working for this.

SethGunnells · Accepted Answer · 2014-07-12 17:25:13Z

0

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.

answered Jul 12, 2014 at 17:25

SethGunnells

1,2691 gold badge12 silver badges19 bronze badges

Collectives™ on Stack Overflow

Make a div grow in all directions with CSS?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related