Enlarging images with CSS (or jQuery) without moving everything else on the page

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?

Answer 2

Put each of your images in a container which has a set width and height. The overflow of your container will be visible.

Anything that flows outside will be visible, but won't effect the content.

http://jsfiddle.net/ck6MG/

Answer 3

It'd use jQuery here for this:

<div id="enlarge_img"></div>

<style type="text/css">
   div#enlarge_img {
       display: none;
       height: 200px;
       line-height: 200px;
       position: absolute;
       text-align: center;
       width: 200px;
   }

   div#enlarge_img > img {
       max-height: 200px;
       max-width: 200px;
   }
</style>

<script type="text/javascript">
$(function() {
    $('body img').bind('mouseover', function() {
        var offset = $(this).offset();

        $('div#enlarge_img').show().css({
            'left' : offset.left - ((200 - $(this).width()) / 2),
            'top' : offset.top- ((200 - $(this).height()) / 2),
        }).html('<img src="'+$(this).attr('src')+'" />');
    });

    $('div#enlarge_img > img').live('mouseout', function() {
        $('div#enlarge_img').hide();
    });
});
</script>

Basicly you have an absolute div which is hidden until you hover a img, then positions itself to where the img is and shows the same image, but bigger. The image increases from the center and won't affect the rest of the structure since it's absolute.

I could add animation if you'd like.

Answer 4

Try css position:absolute for the elements you don't want to move

put z-index high for those elements you want to show on top

Answer 5

Add a class="userpic-container" to the parent div of the image and try this CSS:

.userpic-container {
    position: relative;
    height: 48px;
    width: 48px;
}

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

Answer 6

https://jsfiddle.net/dafemtg1/

FYI, CSS using the transform property:

img{transition:all 0.2s;}
img:hover {transform:scale(1.4);transition:all 0.2s;}