enavu webdevmania tutsvalley psdestination
visit the enavu network
13 Comments Article Title Overlay

Making Image Overlay Caption Using CSS

In this tutorial we will make a nice transparent overlay image caption using CSS.

  • DZone
  • Digg
  • Design Float
  • Delicious
  • Blinklist
  • Reddit
  • Facebook
  • Google Buzz
  • Twitter
  • StumbleUpon
  • Tumblr
  • Share/Bookmark

Intro

There are 2 image overlay caption related tutorials i made “Making image captions using jQuery” and “Making A Cool Thumbnail Effect With Zoom And Sliding Captions”. Feel free to check them out, they’re great :)

Both of them have some cool effect made with jQuery, but yesterday a reader (hi Goodluck) asked me how to have the captions shown by default without jQuery effects. So i realized i don’t have a tutorial explaining how to make a simple overlay image caption and here we are. Enjoy.

How it looks

CSS Caption

HTML

<!-- wrapper div -->
<div class='wrapper'>
	<!-- image -->
	<img src='wolf.jpg' />
	<!-- description div -->
	<div class='description'>
		<!-- description content -->
		<p class='description_content'>The pack, the basic...</p>
		<!-- end description content -->
	</div>
	<!-- end description div -->
</div>
<!-- end wrapper div -->

CSS

div.wrapper{
	float:left; /* important */
	position:relative; /* important(so we can absolutely position the description div */
}
div.description{
	position:absolute; /* absolute position (so we can position it where we want)*/
	bottom:0px; /* position will be on bottom */
	left:0px;
	width:100%;
	/* styling bellow */
	background-color:black;
	font-family: 'tahoma';
	font-size:15px;
	color:white;
	opacity:0.6; /* transparency */
	filter:alpha(opacity=60); /* IE transparency */
}
p.description_content{
	padding:10px;
	margin:0px;
}

That’s it

And we have a nice transparent overlay image caption. If you don’t like that the text is also transparent then i can suggest you to use a transparent PNG image 1px wide and 1px tall as the background of the .description and remove the CSS opacity, or you can use javascript to make a transparent mask and on top of it show the caption text. If you like to see a tutorial on different ways to achieve that, let me know and i’ll see what i can do :)

Stay updated

If you want you can subscribe to TutsValley RSS Feed or follow us on Twitter to be informed when a new tutorial comes out. Thank you.

Related posts:

  1. Making image captions using jQuery
  2. Making A Cool Thumbnail Effect With Zoom And Sliding Captions
  3. Making a Cool Spotlight Effect with jQuery
  4. Image splitting effect with CSS and JQuery
  5. Curtains Opening Animation with jQuery

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • Muchas gracias!!

  • @Arturo – You’re welcome :)

  • didn’t try but is there in css such a rule: bottombottom:0px;

  • @Vadim – There isn’t. The syntax highlighter has few issues, if you check the source code you will see it’s bottom:0px; :)

  • Good one! I tried and it worked.

  • hey check this post

    http://www.webdeveloperjuice.com/2010/01/27/easy-way-to-slide-images-with-overlay-caption-using-css-and-jquery/

    .. i made something with help or your this post

  • css rulez

  • Hi Boba
    Thanks alot man. I just saw your tutorial today. I have been sort of busy. I am really going to enjoy learning this one.I plan to put it up on a website that I am developing for an environmental organisation. Thanks once again

  • Great post, going to send this link to my friends. Truly love it. THX.

  • Thanks!

    Just a hint: You don’t need to specify units when you set values to zero: margin: 0;

  • Great tutorial, I set the position to top nad the height at 100% to get a full fade effect.

    see: http://jasondaydesign.com/masonry_demo/

    thanks!

Leave your own!

Sponsors

fzilla file hosting

Popular Articles