Grow out of center

Question

I'm trying to increase the bottom circles in Firefox (need to add to other prefixes, still in dev)

They behave correctly, but my goal is to make them grow from the center. Any ideas on how I can use CSS for this? Would it be positioned? The link is here: http://www.catonthecouch.com/feline/

I just increase the width / height on hover.

Answer 1

Add negative left and top margins equal to half the resize ( -15px )

Answer 2

If you use CSS3, you can use property conversion and scale the element.

Obs: I omitted the prefixes to avoid too much code, but you should use them.

 .circle { width: 500px; height: 500px; border-radius: 100%; transform: scale(0.1); /* 1/10 of the original size */ transition: all 1s ease-in-out; } .circle.opened { transform: scale(1); } 

Working demo: http://jsfiddle.net/JCMais/eKs59/