Học tập‎ > ‎html/css/php..‎ > ‎

Tạo tiêu đề động cho hình ảnh với CSS3

    Html
  1. <div class="item">
  2. <a href="#"><img src="Your Image Here" alt="" title=""/></a>
  3. <div class="info">
  4. <h4>Title</h4>
  5. <p>Description</p>
  6. </div>
  7. </div>

    CSS
  1. body {
  2. font-family:Arial, Helvetica, sans-serif;
  3. }
  4. img {
  5. position:absolute;
  6. }
  7. h4 {
  8. font-weight:bold;
  9. padding-bottom:3px;
  10. padding-top:5px;
  11. }
  12. .info p {
  13. font-style:italic;
  14. padding-bottom:8px;
  15. }
  16. .item {
  17. width:200px;
  18. height:300px;
  19. border:1px solid #222;
  20. overflow:hidden;
  21. position:relative;
  22. float:left;
  23. display:inline;
  24. margin:25px 0 0 20px;
  25. }
  26. .info {
  27. background-color:#FFF;
  28. position:absolute;
  29. width:100%;
  30. min-height:40px;
  31. margin-top:300px;
  32. border-top:1px solid #FCF;
  33. border-bottom:1px solid #FCF;
  34. opacity:.1;
  35. filter: alpha(opacity=0.1);
  36. padding:0 10px 0 10px;
  37. }
  38. .info p, .info h4{
  39. font-size:12px;
  40. }
  41. .item:hover .info{
  42. margin-top:195px;
  43. opacity:.8;
  44. filter: alpha(opacity=0.8);
  45. }
  46. .info {
  47. transition: margin-top .5s ease, opacity 1s ease;
  48. -moz-transition:margin-top .5s ease, opacity 1s ease;
  49. -webkit-transition:margin-top .5s ease, opacity 1s ease;
  50. -o-transition:margin-top .5s ease, opacity 1s ease;
  51. }

Note: I always use a CSS reset before I start coding, and did so on the demo page, so if you copy this code it might not look the same unless you also use a CSS reset.

I’m in the middle of revamping my portfolio and came out with a pretty nice effect for photo captions, using only CSS3, that I wanted to share.
Demo : Link