Image With Transparent Caption


/ Published in: CSS
Save to your folder(s)

Example is here: http://www.sohtanaka.com/web-design/examples/drop-shadow/caption.htm


Copy this code and paste it in your HTML
  1. HTML:
  2.  
  3. <div class="img-desc">
  4. <img src="sample.jpg" alt="" />
  5. <cite>Salone del mobile Milano, April 2008 - Peeta</cite>
  6. </div>
  7.  
  8.  
  9. CSS:
  10.  
  11. .img-desc {
  12. position: relative;
  13. display: block;
  14. height:335px;
  15. width: 575px;
  16. }
  17. .img-desc cite {
  18. background: #111;
  19. filter:alpha(opacity=55);
  20. opacity:.55;
  21. color: #fff;
  22. position: absolute;
  23. bottom: 0;
  24. left: 0;
  25. width: 555px;
  26. padding: 10px;
  27. border-top: 1px solid #999;
  28. }

URL: http://www.sohtanaka.com/web-design/spice-up-your-images-with-css/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.