Growing an element on the spot in CSS


I have a lot of spans that are boxes in a center tag and I want each box to grow on the spot when the user hovers over it. This doesn't work, because it shifts all the other elements along with it and doesn't look nice:

.square:hover { background-color: yellow; width: 50px; // originally 25px height: 50px;// originally 25px }

How can I get it to grow without shoving all of its neighbors aside?


I would wrap the .square in an relatively position container of the same size, then on hove make .square absolutely positioned

.squareContainer { position:relative; width: 25px; height: 25px; } .square:hover { position:absolute; width: 50px; height: 50px; }

This way when .square is removed from the flow it doesn't affect other elements. EDIT

Setting .square to absolute doesn't seem to work<br /> but setting both to relative works

<a href="http://jsfiddle.net/UD9yM/" rel="nofollow">FIDDLE</a>

<a href="http://jsfiddle.net/ur4aT/10/" rel="nofollow">http://jsfiddle.net/ur4aT/10/</a>


Give .square position absolute and position it relative to it's container...

.square { position:absolute; /* moves the element out of normal flow */ } .square:hover { background-color: yellow; width: 50px; // originally 25px height: 50px;// originally 25px }

You may also need to alter the top and left properties in the :hover psuedo-selector since positioning is based off of the top left corner of the element:

.square { top:50px; left:50px; } .square:hover { /* ... definitions ... */ top:25px; left:25px; }


I have used the trick

<ol><li>set the outer divs position to inline-block to align them horizontally (not required thou')</li> <li>set the width and height of outer div (required)</li> <li>use % based dimensions for inner div (choose whatever you like, and it's simple to work that way).</li> <li>on inner div :hover state, set it's dimensions again % based and set it's margin a/c to formula margin = (100-width)/2 </li> </ol>

Check out the demo @jsFiddle: <a href="http://jsfiddle.net/dxb28/" rel="nofollow">http://jsfiddle.net/dxb28/</a>,

best of luck :)<