CODEWITHSUNDEEP
javascriptjqueryimageanimationhover
James
James

Reputation: 43627

Enlarge image on hover

<ul>
    <li><img /></li>
    <li><img /></li>
    <li><img /></li>
    <li><img /></li>
    <li><img /></li>
</ul>

Its a horizontal list, not vertical.

How can we enlarge one of the images, when we hover on it?

Upvotes: 0

Views: 3177

Answers (4)

Lucretius
Lucretius

Reputation: 23

You can do this very easily with CSS transform property. The scale function can be used to enlarge and reduce the size of an element. It technically applies a 3d transformation. The default scale of all elements is 1. In order to increase the size of the image on hover, you can do:

.ul img:hover {
   transform : scale(1.2); 
   transition : 0.5s ease; //Some animation
}

For further reading on transform, you can click here

Upvotes: 0

dsomnus
dsomnus

Reputation: 1401

Here's how to do this in jquery:

$('li > img').mouseover(function(){
    $(this).css('width', '250px');
    $(this).css('height', '250px');
})
$('li > img').mouseout(function(){
    $(this).css('width', '200px');
    $(this).css('height', '200px');
})

This will tear the design quite a bit though - you might wanna look into taking the same picture and overlaying it over the image on a different z-index. Or you can clone the image, place it in the middle with UI position and use .attr() or .css() to change it's size.

Upvotes: 1

kobe
kobe

Reputation: 15835

you should do something like this by maintaing two images.

we did some example , please change the names accordingly

$('.itemBox').bind('mouseenter',function(){
            $lrgImage = $(this).find('img');
            lrgImageSrc = $lrgImage.attr('src');
            bkImage = 'url(' + lrgImageSrc + ')';
            $(this).css('background-image',bkImage);
            $(this).css('background-position','center center');
            $lrgImage.fadeOut('fast');

        });
        $('.itemBox').bind('mouseleave',function(){
            $lrgImage = $(this).find('img');
            $(this).css('background-image','none');
            $lrgImage.fadeIn('fast');

        });

This solution will take care of image getting blur on increasing height and width

Upvotes: 1

user113716
user113716

Reputation: 322462

http://jsfiddle.net/pfuWr/

ul img:hover {
    width: 180px;
    height: 150px;
}

You'll need a workaround to support IE6.

For IE6, you could try wrapping the image in an <a>, and doing this:

ul a:hover > img{
    width: 180px;
    height: 150px;
}

Upvotes: 4

Related Questions