Question

Is there a technique to resize an image over a given time interval?

What I want to do is have an image and when the mouse rolls overs it, it should resize the image making it larger. All I can find are simple rollover scripts that instantly resize the image. I want to do it over a period of about a second.

And as a must it cannot lag and destroy the visual experience. I am looking for an approach in javascript, jQuery, or HTML5 if it’s possible; other suggestions appreciated but no flash.

Answer 1

It’s very easy with CSS3 Transitions:

.myImg
{
    width: 200px;
    transition-duration: 1s;
    -webkit-transition-duration: 1s;
}
.myImg:hover
{
    width: 300px;
}

Demo: jsfiddle.net/yyDd4