Увеличение изображений с помощью CSS (или jQuery)без перемещения всего остального на странице

У меня есть динамически сгенерированный набор изображений (с комментарий возле каждого изображения). Я хочу отображать каждое изображение с максимальной -шириной и максимальной -высотой 48 пикселей, но когда пользователь наводит курсор на изображение, оно увеличивается до максимальной -ширины и максимальной -высоты 200 пикселей. Но без перемещения всего остального на странице. Это код, который генерирует изображения :

$(function(){
        $.getJSON("inc/API.php", 
        {command : "getUserComments", userid : getQueryStringValue("userid")},
        function(result)
        {
        for (var i = 0; i<6; i++){
            $("#divUserCommentsContent").append("<div id='divUserComment'><div id='divCommentTime'>"+
            result[i].commentDateAndTime+"</div><div id='divUserDetail'><div id='divUserpic'>
       **<img src='images/"+result[i].imageFileName+"' class='commentpic' />**</div>
            <div id='divUsername'>Comment for <a href='rank.html?imageID="+result[i].imageID+
            "&imageFileName="+result[i].imageFileName+"'>"+result[i].imageHeader+
            "</a></div></div><div id='divCommentText'>"+result[i].comment+"</div></div>");
        }
    });
});

. Я пометил изображение цифрой 2 **. Это CSS :

.userpic,.commentpic
{
max-height:48px;
max-width:48px;
border-radius:5px;
z-index:1;
position:relative;
}
.commentpic:hover
{
max-width: 200px;
max-height: 200px;
position:relative;
z-index: 50;
}

. Он увеличивает изображение, но также перемещает все остальное справа от него и под изображением.

Как увеличить изображения с помощью CSS (предпочтительнее)или с помощью jQuery, не перемещая сюда все остальное? Спасибо!