Question

I have the following code:

http://jsfiddle.net/EMX4Q/

Which is very simple, when you mouseover the image, it will show you the same image but bigger.

I’d like to achieve an effect like Google’s one, at Images: https://www.google.com/search?q=image&oe=utf-8&client=ubuntu&channel=fs&um=1&ie=UTF-8&hl=es&tbm=isch&source=og&sa=N&tab=wi&ei=p6wJUKMpg7LbBfTszdMH&biw=1680&bih=615&sei=qawJUKfHI9Lr0QGOouiLBA

How could I do it?

Answer 1

Use jQuery animate(), or addClass()/removeClass() using the time parameter. Here is an example that I have used:

$('.circle').hover(
  function () {
    $(this).addClass('bigger-outer', 1000);
  }, 
  function () {
    $(this).removeClass('bigger-outer', 1000);
  }
);

So it will add/ remove the class of bigger-outer on anything with the class of circle on hover, and transition over 1000 milliseconds, or one second.