Question

I am trying to create google image engine effect that shows images credits when user hovers the image (enlarge the image and show credits). I am not sure how to pop the image up and ignore the flow of the contents.

I know lightbox would do the similar effect but all I need is a simple hover and show images credits effect. I have search google and all I got are popup plugins like lightbox. I was wondering if anyone give me a direction or tutorial for that? Thanks a lot.

Answer 1

I have created a basic example which enlarges the image and show the box. To make this a general solution, some finer javascript is needed.

I create a invisible div containing an img element with the same image. In the onmouseover event of the original img element i start a timer, which shows the div with the duplicate img element. When the div is shown, another timer is started. When the timer fires I change the size and position of the div and the size of the image in the div. By using CSS3 Transistions the browser will automatically make the size-change into an animation which looks like a zoom.

I have tested my code in Chrome but it should also function in Firefox and Opera. IE will not show the animation.

Link: Here

Use my source as a starting point.

EDIT: I have written a better version of the code which takes all images that have the class thumbs and makes them zoom. This version is a bit more complicated than the old one. Again, take a look at the source and feel free to ask questions in the commentaries below.

Link: Here