Advanced Search

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

Expand | Embed | Plain Text

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.