Hi everyone, in this article I’m explaining about image caption.

Description:

Almost all famous news websites always display images with a caption box that is aligned at the bottom of the same image. These image captions provide extra information about the images displayed on the web pages. You can quickly add these types caption over image in your images using CSS and HTML. 

Caption on bottom side of image

Source code:

In this sample i use bootstrap css for manage row and column and good looking

ui.

<linkhref="~/Content/bootstrap/css/bootstrap.min.css"rel="stylesheet"/>
 
<styletype="text/css">
    div.wrapper {
        float: left;
        position: relative;
    }
    .row {
        margin-left:0;
        margin-right:0;
    }
    div.description {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 98%;
        margin:auto;
        background-color: black;
        font-family: 'tahoma';
        font-size: 15px;
        color: white;
        opacity: 0.8;
        filter: alpha(opacity=60);
    }
 
    p.description_content {
        padding: 10px;
        margin: 0px;
    }
</style>
 
<divclass="clearfixS">&nbsp;</div>
<divclass="container">
    <divclass="panel panel-primary">
        <divclass="row">
            <divclass="col-md-7"style="padding-left:0;">
                <imgsrc='/img/SideUpper.jpg'style="width: 100%;height:620px;"/>
                <divclass='description'>
                    <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.</p>
                </div>
            </div>
            <divclass="col-md-5"style="padding-left:0;padding-right:0;">
                <divclass="col-md-12"style="padding-left:0;padding-right:10px;">
                    <imgsrc='/img/SideUpper.jpg'style="width: 100%;height:300px;"/>
                    <divclass='description'>
                        <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.</p>
                    </div>
                </div>
                <divclass="clearfixS">&nbsp;</div>
                <divclass="col-md-12"style="padding-left:0;padding-right:10px;">
                    <imgsrc='/img/SideUpper.jpg'style="width: 100%;height:300px;"/>
                    <divclass='description'>
                        <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Output:

Caption on top side of image

Source code:

@{
    ViewBag.Title = "Index";
}
<linkhref="~/Content/bootstrap/css/bootstrap.min.css"rel="stylesheet"/>
<styletype="text/css">
    div.wrapper {
        float: left;
        position: relative;
    }
    .row {
        margin-left:0;
        margin-right:0;
    }
    div.description {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 98%;
        margin:auto;
        background-color: black;
        font-family: 'tahoma';
        font-size: 15px;
        color: white;
        opacity: 0.8;
        filter: alpha(opacity=60);
    }
 
    p.description_content {
        padding: 10px;
        margin: 0px;
    }
</style>
 
<divclass="clearfixS">&nbsp;</div>
<divclass="container">
    <divclass="panel panel-primary">
        <divclass="row">
            <divclass="col-md-7"style="padding-left:0;">
                <imgsrc='/img/SideUpper.jpg'style="width: 100%;height:620px;"/>
                <divclass='description'>
                    <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.</p>
                </div>
            </div>
            <divclass="col-md-5"style="padding-left:0;padding-right:0;">
                <divclass="col-md-12"style="padding-left:0;padding-right:10px;">
                    <imgsrc='/img/SideUpper.jpg'style="width: 100%;height:300px;"/>
                    <divclass='description'>
                        <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.</p>
                    </div>
                </div>
                <divclass="clearfixS">&nbsp;</div>
                <divclass="col-md-12"style="padding-left:0;padding-right:10px;">
                    <imgsrc='/img/SideUpper.jpg'style="width: 100%;height:300px;"/>
                    <divclass='description'>
                        <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Output:

Caption on hover of image

Source code:

@{
    ViewBag.Title = "Index";
}
<linkhref="~/Content/bootstrap/css/bootstrap.min.css"rel="stylesheet"/>
<scriptsrc="~/Scripts/jquery-2.1.1.min.js"></script>
<styletype="text/css">
    div.wrapper {
        float: left;
        position: relative;
    }
    .row {
        margin-left:0;
        margin-right:0;
    }
    div.description {
        display:none;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 98%;
        margin:auto;
        background-color: black;
        font-family: 'tahoma';
        font-size: 15px;
        color: white;
        opacity: 0.8;
        filter: alpha(opacity=60);
    }
 
    p.description_content {
        padding: 10px;
        margin: 0px;
    }
</style>
 
<script>
    $(document).ready(function () {
 
        $('.img-caption1').hover(
            function () {
                $('.desc1').fadeIn();
        }, function () {
            $('.desc1').fadeOut();
        });
        $('.img-caption2').hover(
            function () {
                $('.desc2').fadeIn();
            }, function () {
                $('.desc2').fadeOut();
            });
        $('.img-caption3').hover(
            function () {
                $('.desc3').fadeIn();
            }, function () {
                $('.desc3').fadeOut();
            });
    });
</script>
 
<divclass="clearfixS">&nbsp;</div>
<divclass="container">
    <divclass="panel panel-primary">
        <divclass="row">
            <divclass="col-md-7"style="padding-left:0;">
                <imgsrc='/img/SideUpper.jpg'class="img-caption1"style="width: 100%;height:620px;"/>
                <divclass='description desc1'>
                    <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.</p>
                </div>
            </div>
            <divclass="col-md-5"style="padding-left:0;padding-right:0;">
                <divclass="col-md-12"style="padding-left:0;padding-right:10px;">
                    <imgsrc='/img/SideUpper.jpg'class="img-caption2"style="width: 100%;height:300px;"/>
                    <divclass='description desc2'>
                        <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.</p>
                    </div>
                </div>
                <divclass="clearfixS">&nbsp;</div>
                <divclass="col-md-12"style="padding-left:0;padding-right:10px;">
                    <imgsrc='/img/SideUpper.jpg'class="img-caption3"style="width: 100%;height:300px;"/>
                    <divclass='description desc3'>
                        <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 

Output:

Caption with button on image

Source code:

@{
    ViewBag.Title = "Index";
}
<linkhref="~/Content/bootstrap/css/bootstrap.min.css"rel="stylesheet"/>
<scriptsrc="~/Scripts/jquery-2.1.1.min.js"></script>
<styletype="text/css">
    div.wrapper {
        float: left;
        position: relative;
    }
    .row {
        margin-left:0;
        margin-right:0;
    }
    div.description {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 98%;
        margin:auto;
        background-color: black;
        font-family: 'tahoma';
        font-size: 15px;
        color: white;
        opacity: 0.8;
        filter: alpha(opacity=60);
    }
 
    p.description_content {
        padding: 10px;
        margin: 0px;
    }
</style>
 
 
<divclass="clearfixS">&nbsp;</div>
<divclass="container">
    <divclass="panel panel-primary">
        <divclass="row">
            <divclass="col-md-7"style="padding-left:0;">
                <imgsrc='/img/SideUpper.jpg'class="img-caption1"style="width: 100%;height:620px;"/>
                <divclass='description desc1'>
                    <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.<ahref="#"class="btn btn-lg btn-default pull-right"><iclass="glyphicon glyphicon-upload"></i></a></p>
                </div>
            </div>
            <divclass="col-md-5"style="padding-left:0;padding-right:0;">
                <divclass="col-md-12"style="padding-left:0;padding-right:10px;">
                    <imgsrc='/img/SideUpper.jpg'class="img-caption2"style="width: 100%;height:300px;"/>
                    <divclass='description desc2'>
                        <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.<ahref="#"class="btn btn-lg btn-default pull-right"><iclass="glyphicon glyphicon-upload"></i></a></p>
                    </div>
                </div>
                <divclass="clearfixS">&nbsp;</div>
                <divclass="col-md-12"style="padding-left:0;padding-right:10px;">
                    <imgsrc='/img/SideUpper.jpg'class="img-caption3"style="width: 100%;height:300px;"/>
                    <divclass='description desc3'>
                        <pclass='description_content'>TUC- "The Unit Converter" is a simple and user friendly application with a clean and easy to use user interface. This application is developed focusing on students, teachers and engineers.<ahref="#"class="btn btn-lg btn-default pull-right"><iclass="glyphicon glyphicon-upload"></i></a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Output:

In my previous post i'll explain about DropDownList in ASP.NET MVC