Highlight, Display, Create On-Hover or On-Mouseover Text-Captions Over an Image Using CSS

Hah! Do you like the title? It’s a bit long, but this was an attempt to save you some time.  I am hoping I captured enough keywords from all of the searches I did that you managed to find this page.   Soh Tanaka is a talented web designer and developer and thankfully he took the time out to write CSS On-Hover Image Captions.

I used his code to successfully implement captions over images using only CSS for EduBasics: Home of Multiplication Hip Hop product page. In all it took about 15 minutes to update the stylesheet, html and upload it to the server. At the end of the day I hope this saved you some time and provided the code you needed.

The Long Road Home

A little due diligence; here are the Google queries that led me to Soh’s article – CSS On-Hover Image Captions. This list is a history of two hours of fumbling around on the internet. The queries are in order #1 being the last query that led me to the light.  What search did you perform to get here? Comment and let me know.

1. css image captions (after two hours)
   
2. show text over image css on hover
3. display text over image on hover using css
4. diplay text over image on hover using css
5. on hover show text
6. css hover display text
7. css hover display image
8. show text over image on hover
9. display text over image
10. css hover
11. show text on hover using css
12. show text on hover
13. highlight image hover effect
14. how to highlight and show text using javascript
15. call multiple javascript functions
16. script.aculo.us highlight on mouseover
17. mootools
18. jquery
19. highlight on mouseover and display text jquery
20. highlight on mouseover and display text
21. spry highlight
22. scriptaculous
23. moo tools