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

Making Image Overlay Caption Using CSS

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

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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!

  • How to center div with float ?
    text-center margin-left:auto, margin-right:auto wan’t do the trick because of float.

    TIA for an hint

  • I am not sure why you are Floating anything :) usually width:100% with a text-align center works.

  • @admin Thanks for reply.
    I would be very thankful if someone explain me how to center this image within a div.

    Here is my example: http://sn.im/10l2ul

  • thanks buddy

  • Not a complete solution if you can only float left and right. Waste of time.

  • Thank you for this post. I’ve been looking for this for a long time, and really appreciate the way you’ve laid it out for me!

  • wow, cool! I had tried it with spans before and it always ended up out of whack or the image had some extra padding. Your solution works great, no padding, it’s crossbrowser and very easy to customize to any site. Thanks!

    Diana

  • by the way, I just tested it with a transparent PNG instead of text (removing the background-color line) and it works as well.

  • It works! Thanks

  • Thanks for the tips work really well for me.

  • Worked like a charm, thanks!

  • Works great – thanks for the very helpful post!

  • This is exactly what I needed. Thanks a lot

  • thanks :) you saved bunch of time for me :)

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting