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.

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.