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.

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
 
<style type="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>
 
<div class="clearfixS">&nbsp;</div>
<div class="container">
    <div class="panel panel-primary">
        <div class="row">
            <div class="col-md-7" style="padding-left:0;">
                <img src='/img/SideUpper.jpg' style="width: 100%;height:620px;" />
                <div class='description'>
                    <p class='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 class="col-md-5" style="padding-left:0;padding-right:0;">
                <div class="col-md-12" style="padding-left:0;padding-right:10px;">
                    <img src='/img/SideUpper.jpg' style="width: 100%;height:300px;" />
                    <div class='description'>
                        <p class='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 class="clearfixS">&nbsp;</div>
                <div class="col-md-12" style="padding-left:0;padding-right:10px;">
                    <img src='/img/SideUpper.jpg' style="width: 100%;height:300px;" />
                    <div class='description'>
                        <p class='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";
}
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="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>
 
<div class="clearfixS">&nbsp;</div>
<div class="container">
    <div class="panel panel-primary">
        <div class="row">
            <div class="col-md-7" style="padding-left:0;">
                <img src='/img/SideUpper.jpg' style="width: 100%;height:620px;" />
                <div class='description'>
                    <p class='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 class="col-md-5" style="padding-left:0;padding-right:0;">
                <div class="col-md-12" style="padding-left:0;padding-right:10px;">
                    <img src='/img/SideUpper.jpg' style="width: 100%;height:300px;" />
                    <div class='description'>
                        <p class='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 class="clearfixS">&nbsp;</div>
                <div class="col-md-12" style="padding-left:0;padding-right:10px;">
                    <img src='/img/SideUpper.jpg' style="width: 100%;height:300px;" />
                    <div class='description'>
                        <p class='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";
}
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<style type="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>
 
<div class="clearfixS">&nbsp;</div>
<div class="container">
    <div class="panel panel-primary">
        <div class="row">
            <div class="col-md-7" style="padding-left:0;">
                <img src='/img/SideUpper.jpg' class="img-caption1" style="width: 100%;height:620px;" />
                <div class='description desc1'>
                    <p class='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 class="col-md-5" style="padding-left:0;padding-right:0;">
                <div class="col-md-12" style="padding-left:0;padding-right:10px;">
                    <img src='/img/SideUpper.jpg' class="img-caption2" style="width: 100%;height:300px;" />
                    <div class='description desc2'>
                        <p class='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 class="clearfixS">&nbsp;</div>
                <div class="col-md-12" style="padding-left:0;padding-right:10px;">
                    <img src='/img/SideUpper.jpg' class="img-caption3" style="width: 100%;height:300px;" />
                    <div class='description desc3'>
                        <p class='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";
}
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<style type="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>
 
 
<div class="clearfixS">&nbsp;</div>
<div class="container">
    <div class="panel panel-primary">
        <div class="row">
            <div class="col-md-7" style="padding-left:0;">
                <img src='/img/SideUpper.jpg' class="img-caption1" style="width: 100%;height:620px;" />
                <div class='description desc1'>
                    <p class='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.<a href="#" class="btn btn-lg btn-default pull-right"><i class="glyphicon glyphicon-upload"></i></a></p>
                </div>
            </div>
            <div class="col-md-5" style="padding-left:0;padding-right:0;">
                <div class="col-md-12" style="padding-left:0;padding-right:10px;">
                    <img src='/img/SideUpper.jpg' class="img-caption2" style="width: 100%;height:300px;" />
                    <div class='description desc2'>
                        <p class='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.<a href="#" class="btn btn-lg btn-default pull-right"><i class="glyphicon glyphicon-upload"></i></a></p>
                    </div>
                </div>
                <div class="clearfixS">&nbsp;</div>
                <div class="col-md-12" style="padding-left:0;padding-right:10px;">
                    <img src='/img/SideUpper.jpg' class="img-caption3" style="width: 100%;height:300px;" />
                    <div class='description desc3'>
                        <p class='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.<a href="#" class="btn btn-lg btn-default pull-right"><i class="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