html - Growing an element on the spot in CSS -


i have lot of spans boxes in center tag , want each box grow on spot when user hovers on it. doesn't work, because shifts other elements along , doesn't nice:

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

how can grow without shoving of neighbors aside?

i wrap .square in relatively position container of same size, 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 removed flow doesn't affect other elements. edit

setting .square absolute doesn't seem work
setting both relative works

fiddle

http://jsfiddle.net/ur4at/10/


Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c# - Copy ObservableCollection to another ObservableCollection -

All overlapping substrings matching a java regex -