Here is a trick on how to create an image caption with just HTML and CSS. Some of you are not a fan of jQuery and prefers something simpler in order to show your image captions. Here is a solution where you get to display your image captions simply by using HTML and CSS. I remembered a friend who sucks at jQuery and never gets jQuery to work properly on her site even after copy and pasting the codes. This tutorial is dedicated to you guys who hates jQuery!

The first part of the tutorial will show you how to display a static image captions. The second part of the tutorial will be more interactive and will let you show your image captions on hover. Both parts will not require the use of jQuery. You will only need a foundation in HTML and CSS for you to apply this successfully on your website. Of course, you can twist this trick into something more interesting if you have a good imagination. The demos are shown below.

First Image Caption Demo

Second Image Caption Demo – On Hover

The Foundation

<ul class="animated">
<!--First Image-->
<li>
    <div class="thumb">
		 <img src="image1.jpg" alt="" />
        <div class='description'>
        <!-- description content -->
        <h1>Electro Geisha</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Image credit goes to <a href="http://hakanphotography.com/">Hakan Photography</a></p>
        <!-- end description content -->
        </div>
    </div>
</li>
<!--Second Image-->
<li>
    <div class="thumb">
		 <img src="image2.jpg" alt="" />
        <div class='description'>
        <!-- description content -->
        <h1>No Parking</h1>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Image credit goes to <a href="http://hakanphotography.com/">Hakan Photography</a></p>
        <!-- end description content -->
        </div>
    </div>
</li>
</ul>

The CSS

ul.animated {
	width: 1000px;
	list-style: none;
	margin: auto;
	padding: 0;
}
ul.animated li {
	float: left;
	position: relative;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--IE6 Fix--*/

}
ul.animated li .thumb {
	width: 425px; /*--Width of image--*/
	height: 276px; /*--Height of image--*/
	padding: 5px;
	position: relative;
}
ul.animated li h2 {
	font-size: 13px;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px;
	background: #f0f0f0;
	border-top: 1px solid #fff;
}
ul.animated li a {
	text-decoration:
	none; color: #777;
	display: block;
}
.description { /*--Style the caption box--*/
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    background-color:black;
    text-align: left;
    font-family: 'tahoma';
    font-size:12px;
    color:white;
    opacity:0.6; /* transparency */
    filter:alpha(opacity=60); /* IE transparency */
}
.description p {
	padding:10px;
        margin:0px;
}
h1 {
	font-family: 'tahoma';
        font-size:12px;
	color:#FFF;
	font-weight:bold;
	padding-left: 10px;
	margin-bottom: -6px;
}

So, you’ll notice that we use position: absolute; so that we can place the image caption anywhere we want within the image thumbnail. You can read a previous tutorial on positions here in order to understand more. No jQuery is needed in order to display an image caption such as this one. If you notice, the style is the same as the previous image caption tutorial with just a little bit of modification. Aren’t you lots are happier without jQuery!

What if you want something a little bit interactive but without using jQuery as well? Is there anyway to do that. Good news, little bunnies! There is! The second technique will let your image captions appear on hover. It will not be as sleek as the one with jQuery but it is still neat! The CSS will change a tad bit from the first technique. I’ll comment it out.

The HTML

<ul class="animated">
<!--First Image-->
<li>
  <div class="thumb">
	   <img src="image1.jpg" alt="" />
       <div class='description'>
       <!-- description content -->
       <h1>Electro Geisha</h1>
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Image credit goes to <a href="http://hakanphotography.com/">Hakan Photography</a></p>
       <!-- end description content -->
       </div>
  </div>
</li>
<li>
  <div class="thumb">
       <img src="image2.jpg" alt="" />
       <div class='description'>
        <!-- description content -->
       <h1>No Parking</h1>
       <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Image credit goes to <a href="http://hakanphotography.com/">Hakan Photography</a></p>
        <!-- end description content -->
       </div>
  </div>
</li>
</ul>

The CSS

ul.animated {
	width: 1000px;
	list-style: none;
	margin: auto;
	padding: 0;
}
ul.animated li {
	float: left;
	position: relative;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--IE6 Fix--*/
}
ul.animated li .thumb {
	width: 425px; /*--Width of image--*/
	height: 276px; /*--Height of image--*/
	padding: 5px;
	position: relative;
}
ul.animated li h2 {
	font-size: 13px;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px;
	background: #f0f0f0;
	border-top: 1px solid #fff;
}
ul.animated li a {
	text-decoration:
	none; color: #777;
	display: block;
}
ul.animated li .description {  /*--Style the caption box--*/
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    background-color:black;
    text-align: left;
    font-family: 'tahoma';
    font-size:12px;
    color:white;
    opacity:0.6; /* transparency */
    filter:alpha(opacity=60); /* IE transparency */
    display: none; /*This is important since we want to hide the image caption and display it only on hover*/
}
ul.animated li:hover .description {/*This is important since we want to show the image caption on hover*/
	display: block;
}
ul.animated li .description p {
	padding:10px;
        margin:0px;
}
h1 {
	font-family: 'tahoma';
        font-size:12px;
	color:#FFF;
	font-weight:bold;
	padding-left: 10px;
	margin-bottom: -6px;
}

The most important part here is the display: none; in the ul.animated li .description and also the class ul.animated li:hover .description with display: block;. display: none; will first hide the image caption. The class ul.animated li:hover .description will display the image caption on hover. display: block; will do the trick.

There you have it! An image caption without jQuery. A non-interactive and an interactive version without jQuery. Hope this will make you bunnies happier! You can definitely play around with this technique to make a more interactive image captions or a long image description. Any comments, questions or suggestions will be appreciated!