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

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

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

Answer 3

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 4

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 5

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 6

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.