---
title: "CSS Image Caption"  
description: "Hi everyone, in this article I’m explaining about image caption."  
author: "Anonymous User"  
published: 2015-01-17  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1552/css-image-caption  
category: "css-css3"  
tags: ["css", "css position", "image view"]  
reading_time: 5 minutes  

---

# CSS Image Caption

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

**Description:**

Almost all famous [news](https://www.mindstick.com/developersection/news) websites always [display images](https://www.mindstick.com/forum/147/how-to-display-images-in-asp-dot-net) 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](https://answers.mindstick.com/qa/95530/how-do-i-fix-safari-not-loading-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](https://www.mindstick.com/forum/23271/is-there-a-way-to-get-the-source-code-from-an-apk-file):**

In this sample i use [bootstrap](https://www.mindstick.com/articles/1629/validation-styles-in-bootstrap-working-with-mvc) 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:**

![CSS Image Caption](https://www.mindstick.com/mindstickarticle/7ea28a15-738a-4ab3-8e40-638eb1ce35d8/images/74e4146e-9484-417d-af37-885d32f3bde2.png)

## 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:**

![CSS Image Caption](https://www.mindstick.com/mindstickarticle/7ea28a15-738a-4ab3-8e40-638eb1ce35d8/images/3276d4e1-d1c2-4f8d-8cd9-4091dc9c2b3b.png)

## 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:**

![CSS Image Caption](https://www.mindstick.com/mindstickarticle/7ea28a15-738a-4ab3-8e40-638eb1ce35d8/images/3e249ff7-7da9-4464-999e-214b9f74df5e.png)

## 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:**

![CSS Image Caption](https://www.mindstick.com/mindstickarticle/7ea28a15-738a-4ab3-8e40-638eb1ce35d8/images/4399df8a-9257-4d8c-ad55-0037a1496b57.png)

\

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

---

Original Source: https://www.mindstick.com/articles/1552/css-image-caption

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.