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 ho

Answer 1

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;
}