_portfolio.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. // Styling for the portfolio section
  2. .portfolio-box {
  3. position: relative;
  4. display: block;
  5. max-width: 650px;
  6. margin: 0 auto;
  7. .portfolio-box-caption {
  8. position: absolute;
  9. bottom: 0;
  10. display: block;
  11. width: 100%;
  12. height: 100%;
  13. text-align: center;
  14. opacity: 0;
  15. color: $white;
  16. background: fade-out($primary, .1);
  17. @include transition-all;
  18. .portfolio-box-caption-content {
  19. position: absolute;
  20. top: 50%;
  21. width: 100%;
  22. transform: translateY(-50%);
  23. text-align: center;
  24. .project-category,
  25. .project-name {
  26. padding: 0 15px;
  27. @include sans-serif-font;
  28. }
  29. .project-category {
  30. font-size: 14px;
  31. font-weight: 600;
  32. text-transform: uppercase;
  33. }
  34. .project-name {
  35. font-size: 18px;
  36. }
  37. }
  38. }
  39. &:hover {
  40. .portfolio-box-caption {
  41. opacity: 1;
  42. }
  43. }
  44. &:focus {
  45. outline: none;
  46. }
  47. @media (min-width: 768px) {
  48. .portfolio-box-caption {
  49. .portfolio-box-caption-content {
  50. .project-category {
  51. font-size: 16px;
  52. }
  53. .project-name {
  54. font-size: 22px;
  55. }
  56. }
  57. }
  58. }
  59. }