Making Image Overlay Caption Using CSS
In this tutorial we will make a nice transparent overlay image caption using CSS.
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
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:
- Making image captions using jQuery
- Making A Cool Thumbnail Effect With Zoom And Sliding Captions
- Making a Cool Spotlight Effect with jQuery
- Image splitting effect with CSS and JQuery
- 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!