cardcaption.css 866 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. /*Credids to http://www.1stwebdesigner.com/image-caption-animation-css3/*/
  2. .card-image:hover figcaption {
  3. -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  4. filter: alpha(opacity=100);
  5. opacity: 1;
  6. top: 0;
  7. }
  8. figcaption {
  9. -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  10. filter: alpha(opacity=0);
  11. opacity: 0;
  12. position: absolute;
  13. top: 50%;
  14. height: 100%;
  15. width: 100%;
  16. background: rgba(0,0,0,.6);
  17. color: #fff;
  18. -webkit-transition: all .5s ease;
  19. -moz-transition: all .5s ease;
  20. -o-transition: all .5s ease;
  21. -ms-transition: all .5s ease;
  22. transition: all .5s ease;
  23. }
  24. figcaption h5{
  25. text-align: center;
  26. margin-top: 10px;
  27. font-weight: 300;
  28. padding: 5px;
  29. }
  30. /*End of stuff*/
  31. figcaption a{
  32. width: 100%;
  33. position: absolute !important;
  34. bottom: 0;
  35. }