jQuery Image Hover Caption

If you hover over some of the images on the Avori demo, you'll notice a semi-transparent black image caption popping up. These captions can be enabled or disabled on a per image basis (which means no captions on images if you don't want them there). This caption not only serves as eye-candy for your visitors, but also has other benefits for both your humans visitors and the search engines.

Benefits for human visitors

Most images benefit from a short written description of what the image depicts, but getting those captions placed correctly below an image often requires a lot of code and are hard to style nicely. By using the built-in jQuery image hover caption, visitors can simply hover over an image to see the caption entered you've entered in the alt attribute of the image. An extra benefit of entering descriptive alt texts is that it will enable visually impaired users to 'see' what is on an image by having their text speaker read the alternative text to them.

Benefits for search engines

Research by SEOmoz has shown that keyword usage in image alt text has a small but significant correlation to your ranking position for that keyword in the search engines. By entering a descriptive text as your alternative text (containing some of your keywords), you can boost your rankings for that keyword as well!

How to enable the caption on images

To enable the jquery image hover caption you should use the following code in the 'HTML' view in your Joomla! content editor.

<span class="fj-img1"><img src="/[your image path]" alt="[Your caption]" /></span>