Question

I have a dynamically generated set of images (with a comment near every image). I want to display every image with max-width and max-height of 48 px, but when the user is hovering over an image it grows to max-width and max-height of 200px. But without moving everything else on the page. This is the code that generates the images:

$(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>");
        }
    });
});

I marked the image with 2 **. This is the 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;
}

It enlarges the image, but also moves everything else on the right of it and below the image.

How can I make the images larger, either with CSS (preferably) or with jQuery, without moving everything else here? Thank you!

Answer 1

You could try something like setting the position of .commentpic to absolute.

You can see an example here: http://jsfiddle.net/HkPCp/3/

I think this is the behavior you want, right?

EDIT : I updated the jsFiddle so that it won’t move the other elements.

Is this the correct behavior?