Your Email:

Overlay Text over an Image with jQuery

Overlay Text over an Image with jQuery

Overlay Text over an Image with jQuery

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

Incoming search terms:

  • jquery image overlay
  • jquery text over image
  • jquery overlay image
  • jquery image text overlay
  • jquery text on image
  • text over image jquery
  • image overlay jquery
  • jquery image with text
  • jquery image text
  • jquery image overlay hover
  • overlay text on image
  • jquery text overlay
Voted by:

  • Tanks for the post. BTW, you have double including of jQuery in the demo and invalid link to the latest version ;) .