5

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!

Igal
  • 5,833
  • 20
  • 74
  • 132
  • Is this what you're looking for http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/ – coder Apr 13 '12 at 13:40
  • Would [z-index](http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/) work? – Anish Gupta Apr 13 '12 at 13:53
  • @DotNetter Yes, pretty much like, maybe even something like that: [http://host.sonspring.com/hoverbox/](http://host.sonspring.com/hoverbox/) – Igal Apr 13 '12 at 14:00
  • @AnishGupta I'm using z-index here. I tried to put `z-index:0;` on other elements, but that didn't help, they're still moving... – Igal Apr 13 '12 at 14:03
  • @Igal did you put a position? – Anish Gupta Apr 13 '12 at 17:28

6 Answers6

4

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?

Iberê
  • 1,211
  • 1
  • 11
  • 16
  • It worked! Everything that was below the image (other divs) didnt move, but the div that was on right of it (`divUsername`) still moved to the left (below the image), so I set its position also to absolute and it worked just fine! Thank you very much! – Igal Apr 13 '12 at 14:13
  • Good Job. I would have a provided a better solution if i was aware that there was content on the right of the image. Bu you already worked it all out. Nice. – Iberê Apr 13 '12 at 14:18
  • When I run your test the 3rd boxs gets moved on :hover of the 2nd. – Robin Castlin Apr 13 '12 at 14:29
  • I edited the jsFiddle to fix that. I seems that it saveed my updated fiddle to some other url. I'll update it again. There. – Iberê Apr 13 '12 at 14:31
  • Interestingly, this method doesn't work in all browsers - in Safari and Chrome the images don't grow at all. It works fine in FF, Opera and even IE. Is there any way around it? – Igal Apr 13 '12 at 18:45
  • I tested the fiddle in safari and chrome for windows and it worked just fine, both are the latest versions. what version are you using? – Iberê Apr 15 '12 at 19:56
1

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/

jeremysawesome
  • 7,033
  • 5
  • 33
  • 37
1

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.

Robin Castlin
  • 10,956
  • 1
  • 28
  • 44
1

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;}
clemens
  • 16,716
  • 11
  • 50
  • 65
Steven Mihelakis
  • 40
  • 4
0

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

Raghuveer
  • 2,630
  • 3
  • 29
  • 59
0

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;
}
kayen
  • 4,838
  • 3
  • 19
  • 20