Making Image Overlay Caption Using CSS
| Web 2.0
Posted at 2014/03/31 13:17

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

  1. <!-- wrapper div -->  
  2. <div class='wrapper'>  
  3.     <!-- image -->  
  4.     <img src='wolf.jpg' />  
  5.     <!-- description div -->  
  6.     <div class='description'>  
  7.         <!-- description content -->  
  8.         <p class='description_content'>The pack, the basic...</p>  
  9.         <!-- end description content -->  
  10.     </div>  
  11.     <!-- end description div -->  
  12. </div>  
  13. <!-- end wrapper div -->  

CSS

  1. div.wrapper{   
  2.     float:left/* important */  
  3.     position:relative/* important(so we can absolutely position the description div */  
  4. }   
  5. div.description{   
  6.     position:absolute/* absolute position (so we can position it where we want)*/  
  7.     bottombottom:0px/* position will be on bottom */  
  8.     left:0px;   
  9.     width:100%;   
  10.     /* styling bellow */  
  11.     background-color:black;   
  12.     font-family'tahoma';   
  13.     font-size:15px;   
  14.     color:white;   
  15.     opacity:0.6; /* transparency */  
  16.     filter:alpha(opacity=60); /* IE transparency */  
  17. }   
  18. p.description_content{   
  19.     padding:10px;   
  20.     margin:0px;   
  21. }  

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.

caption.png  (122.7 KB)  (Down : 12)
 댓글 남기기