In this article I will explain how to display semi-transparent text over image on hover or in other words on mouse over by reducing the opacity using CSS and jQuery.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .info
        {
            background-color: Black;
            filter: alpha(opacity=60);
            opacity: 0.6;
            position: absolute;
            display: block;
            color: White;
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var info = $("#info");
            if (info.length == 0) {
                info = $("<span />").addClass("info");
                $("body").append(info);
            }
            info.hide();
            $(".hover_text").bind("mouseenter", function () {
                var p = GetScreenCordinates(this);
                info.html(this.alt);
                info.show();
                info.css("width", $(this).width());
                info.css({ "left": p.x, "top": p.y + this.offsetHeight - info[0].offsetHeight });
            });
            $(".hover_text").bind("mouseleave", function () {
                info.hide();
            });
        });
        function GetScreenCordinates(obj) {
            var p = {};
            p.x = obj.offsetLeft;
            p.y = obj.offsetTop;
            while (obj.offsetParent) {
                p.x = p.x + obj.offsetParent.offsetLeft;
                p.y = p.y + obj.offsetParent.offsetTop;
                if (obj == document.getElementsByTagName("body")[0]) {
                    break;
                }
                else {
                    obj = obj.offsetParent;
                }
            }
            return p;
        }
    </script>
    <img src="Jellyfish.jpg" class="hover_text" style="height: 300px; width: 400px" alt="Jellyfish are the major non-polyp form of individuals of the phylum Cnidaria. They are typified as free-swimming marine animals consisting of a gelatinous umbrella-shaped bell and trailing tentacles." />
</body>
</html>
 
Explanation:
The concept is very simple. I have an HTML Image with a specified dimension i.e. Height and Width. The text to be displayed on hover or OnMouseOver is set as the Alternate Text using the alt tag.
Note: For all the images that you need to display text on hover you will need to apply the class hover_text.

Then you need to copy and paste the complete jQuery script onto your page. The script simply looks for the images with the class hover_text and when mouse cursor is moved over such image, then a semi-transparent label is displayed over the Image with the Text.
To make the label semi-transparent a CSS class named info must also be placed onto the page Head section or CSS class file.
how to display semi-transparent text over image on hover or on mouse over using jQuery

how to display semi-transparent text over image on hover or on mouse over using jQuery
 

Demo
 
Downloads