Text Captions Overlay Image in Asp.Net using jQuery

In this tutorial, we have to learn how to make text captions overlay image in Asp.Net using jQuery.

CSS

<style type="text/css">
     .box
     {
         width:200px;
         height:180px;
         overflow:hidden;
         margin:10px;
         padding:0;
         position: relative;
     }
     .box img
     {
         height:180px;
         width:200px;
     }
     .box .caption
     {
        display: none;
        font-size: 16px;
        bottom: 0px;
        left: 0;
        position: absolute;
        height: 40px;
        margin: 0;
        background: #000;
        opacity: 0.7;
        width: 100%;
        color: #FFF;
        padding: 5px;
     }
    </style>

default.aspx

<div class="box" onmouseover="showCaption();" onmouseout="hideCaption();">
          <asp:Image Width="200" ImageUrl="~/images/test1.jpg" AlternateText="" ID="img_photo" runat="server" />
          <div class="caption">
           <p>here caption text</p>
          </div>
      </div>

jQuery

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
    function showCaption() {
        $(".box .caption").css("display", "block");
    }
    function hideCaption() {
        $(".box .caption").css("display", "none");
    }
</script>

Demo

Download Demo Project