![]() ![]() |
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.
<!-- 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 -->
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; }
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
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.