Изменение размера элемента при зависании, чтобы не перемещать других вокруг

Question

Я пытался сделать эту работу, но не могу найти способ. Вот пример, я работаю над

HTML:

<ul> 
<li><img></li> 
<li><img></li> 
</ul> 

CSS

ul{position:relative;margin:0;padding:0;position:relative} 
li{width:100px;height:100px;list-style-type:none;float:left;margin:2px;border: 1px solid #000} 
img{} 
li:hover{width:150px;height:150px;} 

И вот JSFiddle: http://jsfiddle.net/qw2W4/2/

Как изменить размер элементов li без перемещения всех других элементов?

Я хотел бы, чтобы это было сделано без использования JS, если это возможно.

Answer 1

http://jsfiddle.net/qw2W4/4/ Проверьте первый элемент. Я вставил еще один элемент, который имеет position: absolute и получает масштабирование при зависании.

Answer 2

делают этот

DEMO

ul { 
    margin: 0; 
    padding: 0; 
} 
li { 
    width: 100px; 
    height: 100px; 
    list-style-type: none; 
    float: left; 
    margin: 2px; 
    border: 1px solid #000; 
    position: relative; 
} 
li img { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
img { 
} 
li:hover img { 
    width: 150px; 
    height: 150px; 
    background-color: blue; 
    z-index: 1; 
} 

Answer 3

Изменение CSS литиево элемента

li { 
    display: inline-block; //or block 
    width: 10px; // set a fixed width, 10px for example 
} 

Это должно работать.