cardcaption.css 851 B

1234567891011121314151617181920212223242526272829303132333435363738
  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. height: 100%;
  14. width: 100%;
  15. background: rgba(0,0,0,.6);
  16. color: #fff;
  17. -webkit-transition: all .5s ease;
  18. -moz-transition: all .5s ease;
  19. -o-transition: all .5s ease;
  20. -ms-transition: all .5s ease;
  21. transition: all .5s ease;
  22. }
  23. figcaption h5{
  24. text-align: center;
  25. margin-top: 10px;
  26. font-weight: 300;
  27. padding: 5px;
  28. }
  29. /*End of stuff*/
  30. figcaption a{
  31. width: 100%;
  32. position: absolute !important;
  33. bottom: 0;
  34. }