0

I am trying to create popup image when user hovers to the images. I have the following codes but the enlarge images will disrupt the flow of my layout. I was wondering if there are better way to popup the image without disrupting the layout. Thanks a lot!

   $('#image_layout img').live("hover", function(){
          var $this=$(this);

          $(this).animate({width: "30%", height: "30%"}, 'slow');

       })   not working properly. 
3
  • Why don't you want to use a plugin?
    – Blender
    Aug 2, 2012 at 0:26
  • If you don't want to use a plugin, you need to create a new div positioned outside the flow of the document with position:absolute.
    – Flash
    Aug 2, 2012 at 0:28
  • @Blender just want to practice.
    – FlyingCat
    Aug 2, 2012 at 0:29

4 Answers 4

2

you can actually do this just with css on browsers that support it.

#image_layout img {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    transition: all 2s;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
});

#image_layout img:hover {
    transform: scale(1.3);
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transform: scale(1.3);
    transition: all 2s;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
});
2
  • interesting thought. but the pictures got messed up after hover few times. Thanks though.
    – FlyingCat
    Aug 2, 2012 at 0:36
  • play with it. you can do some awesomes with just css
    – Ian Wood
    Aug 2, 2012 at 0:42
0

Instead of resizing the image itself, you should display a separate div with the same image, and resize that div+image.

0

As you are trying to make a popout, i would suggest that you have a position:fixed overlay over your website.

You should have a div, which is normally hidden, but only shows when the user presses a picture. The div should be position: fixed or absolute, so that it doesnt flow in your layout, but just displays on top of all other content

<html>
<head><tile>My awesome title</title><head>
<body>
    <div id="photoviewer" style="display: none; position:fixed; top: xx; left: xx">
        <!--Your awesome photoviewer here -->
    </div>
    <!-- The rest of the content of your website here :) -->
</body>
</html>

And then use JQuery to show and unshow the div "photoviewer"

Edit: This would work if you wanted to make a photoviewer, but with some javascript/jquery magic you can also make the hover you wanted to have :), then the position parameter should be set to absolute, i guess.

-1

Why don't you use css, use position absolute and margins that should stop it disrupting the layout.

#image_layout img {
    position:absolute;
    margin:_ _ _ _;
}
2
  • I don't believe setting a margin will stop the layout from getting disrupted. Setting position: absolute will remove the element from the flow of the document, so the margin will have no effect.
    – Zhihao
    Aug 2, 2012 at 0:34
  • I think I've misunderstood your original suggestion. If you're going to use margin to position an element with position: absolute, why not use top, left, right, and/or bottom instead since that's what they were intended to be used for? There's still the issue of the absolutely-positioned element being removed from the document flow though. The OP would need a placeholder element to keep the space where the img used to be free so that the position: absolute image does not overlap anything. This would also make fluid layouts difficult without extra JS.
    – Zhihao
    Aug 2, 2012 at 0:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.