_more.scss 588 B

123456789101112131415161718192021222324252627282930313233343536
  1. .more {
  2. position: relative;
  3. }
  4. .more-hover {
  5. &:hover {
  6. .more-data {
  7. opacity: .2;
  8. filter: blur(2px);
  9. }
  10. .more-layer {
  11. opacity: 1;
  12. }
  13. }
  14. }
  15. .more-layer {
  16. position: absolute;
  17. top: 0;
  18. left: 0;
  19. right: 0;
  20. bottom: 0;
  21. opacity: 1;
  22. display: flex;
  23. align-items: flex-end;
  24. justify-content: center;
  25. background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 85%);
  26. transition: $transition-duration opacity ease;
  27. padding: $gap-4;
  28. z-index: 1;
  29. }
  30. .more-data {
  31. transition: $transition-duration opacity ease;
  32. }