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!
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?