Grow from center [closed]

Question

I have been trying to get the bottom circles to grow in Firefox (need to add in other prefixes, still in dev)

They are behaving properly, but my goal is to get them to grow from the center. Any ideas on how i can use CSS to do that? Would it be a positioning thing? The link is here: http://www.catonthecouch.com/feline/

I am simply growing the width/height on hover.

Answer 1

Add negative left and top margins equal to half of the change in size (-15px)

Answer 2

If you are using CSS3, you can use the property transform, and scale the element.

Obs: I have 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/