CODEWITHSUNDEEP
javascriptjqueryhtml
ericgrosse
ericgrosse

Reputation: 1510

How to resize an image fluidly/dynamically

I'm trying to create a website design where I have a 3 by 3 grid of images, and whenever I put the mouse over a particular image, that image gets resized slightly larger than the rest. This re-size shouldn't happen instantly though; it would be a sort of fluid animation where the height and width of the image are increasing by x pixels per frame (while maintaining aspect ratio) until reaching the desired size.

I'm pretty sure this can be done in JQuery but I can't seem to find the command for it. The closest I could find is the JQuery scale effect, but that shrinks the image into nothing instead of dynamically increasing its size to some prescribed maximum.

Now assuming I got the implementation for that correct, how would I get the script to resize the images individually when the mouse hovers over them? So far I've only been able to resize all the images at once, and I'm not sure how I could fix that through the script if I gave each of the 9 images separate ids.

Upvotes: 0

Views: 288

Answers (1)

zsaat14
zsaat14

Reputation: 1118

CSS transitions are what you need. You can adjust the timing of the change and animate any CSS property with them.

The following code will expand the image by a factor of 1/5 in 1 second when the mouse hovers over the image.

img {
    width: 200px;
    height: 150px;
    transition: width 1s;
    -webkit-transition: width 1s;
    transition: height 1s;
    -webkit-transition: height 1s;
}
img:hover{
    width: 240px;
    height: 180px;
}

Here is a rough fiddle to get you started.

Upvotes: 2

Related Questions