Enlarging images with CSS (or jQuery) without moving everything else on the page
css, image, image-enlarge, jquery
Solution
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?
Problem
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!