Here comes another goodness of jQuery. We will review a quick tutorial to create a display box of image that will have an animated comment whenever you hover it.
In the HTML code section, set a wrap div id inside the container. The wrap renders two classes which are image class and span class called: “comment”.
The image class and the comment class should have absolute position so the comment stucks on the image. Therefore, the wrap class is defined with relative position and the overflow should be set to hidden. This will hide the comment when your mouse hover-off the image.
In the end, hover jQuery event will trigger the “comment” class to animate.
Step on to the site page and the demo to find out the details. You’ll be surprise how the jQuery FX animates so smooth with very simple codes ;)
URL:
site: http://www.jcargoo.org/2009/08/overlay-text-over-image-with-very.html
demo: http://jcargoo.110mb.com/textimages/image.htm
Twitter Updates
Loading...
Tanks for the post. BTW, you have double including of jQuery in the demo and invalid link to the latest version ;).