Advanced Search

CSS Image Framing - An Easy Way To Style Images Using CSS

/ Published in: CSS
Save to your folder(s)
A tutorial showing you how to give your images some style using only CSS rather than using Photoshop to give images a border/frame.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2. .img
  3. {
  4. display: inline-block;
  5. position: relative;
  6. text-decoration: none;
  7. }
  8.  
  9. .img img
  10. {
  11. border: 1px solid #cccccc;
  12. padding: 10px;
  13. }
  14.  
  15. img:hover { border-color: #aaaaaa; }
  16.  
  17. .img div
  18. {
  19. background: #666666;
  20. color: #ffffff;
  21. opacity: .70;
  22. padding: 3px 0px;
  23. position: absolute;
  24. left: 0px;
  25. bottom: 25px;
  26. text-align: center;
  27. width: 100%;
  28. }
  29.  
  30. .img:hover div { opacity: .90; }
  31. </style>
  32.  
  33. <a href="#" class="img">
  34. <img src="http://www.nealgrosskopf.com/images/gallery/thumbs/100_2640.jpg">
  35. <div>Green Plants</div>
  36. </a>

URL: http://www.nealgrosskopf.com/tech/thread.asp?pid=32

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.