CODEWITHSUNDEEP
jquery
FlyingCat
FlyingCat

Reputation: 14288

Enlarging images when mouseover using Jquery?

I am trying to enlarge the images when mouseover and reduce the size back to normal after mouseout. I have the following:

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

          $this.attr('width','25%');
          $this.attr('height','25%');


       })

The enlarging part works fine but I am not sure how to reduce the size after mouseout. Also, I think my codes are bit ugly and not sure how to fix it. Thanks a lot.

Upvotes: 4

Views: 29515

Answers (4)

shali ravi
shali ravi

Reputation: 41

Increasing the width and height of the image , changes the position of the image (ie) it is enlarged but not in the same position where the original image was present.

Using Scaling property will address this issue.

.transition {
    -webkit-transform: scale(2); 
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

Fiddle link : http://jsfiddle.net/RC7kb/178/

Upvotes: 2

Tats_innit
Tats_innit

Reputation: 34117

Try this: http://jsfiddle.net/FPKAP/11/ or using hover: http://jsfiddle.net/FPKAP/12/

When you will hover over the HULK it will zoomin and on mouse out zoom out.

This should help the need, lemme know if I misunderstood anything please, :)

code

$('#zoomimg').mouseenter(function() {
    $(this).css("cursor","pointer");
    $(this).animate({width: "50%", height: "50%"}, 'slow');
});

$('#zoomimg').mouseleave(function() {   
    $(this).animate({width: "28%"}, 'slow');
});

code

$('#zoomimg').hover(function() {
    $(this).css("cursor", "pointer");
    $(this).animate({
        width: "50%",
        height: "50%"
    }, 'slow');

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

});​

Upvotes: 14

JCOC611
JCOC611

Reputation: 19759

You can use this: jsFiddle

$('#image').hover(function(){
    $(this).css({width:"100%",height:"100%"});
},function(){
    $(this).css({width:"50%",height:"50%"});   
});

Upvotes: 1

Blender
Blender

Reputation: 298582

I'd first try CSS for this:

#image img {
  width: 50%;
  height: 50%;
}

#image img:hover {
  width: 100%;
  height: 100%;
}

Upvotes: 0

Related Questions