如何创建Google图像引擎效果？

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

This will show a div floating above the div container for the image.

<div id="yourImage1Parent"><img id"yourImage1" src="yourImage1src.jpg" /></div>
<script type="javascript/text">
 var credits = document.createElement("div");
 credits.style = "position: absolute; height:25px; width: 25px";
 credits.innerHTML = //load credits from ajax or array or logic, maybe from data-attribute
 document.getElementById("yourImage1Parent").appendChild(credits);
</script>

However, it is simplistic. It needs an event to be wired up for controlling the viewing of this element and removal of the element. Since there was no actual code for an example, this code is just an example.

Answer 2

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