No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_blurable.scss 751B

12345678910111213141516171819202122232425262728293031323334353637
  1. //
  2. // Blurable
  3. // add a blue effect on hover on any element with .blur--hover class
  4. //
  5. .blur--hover {
  6. position: relative;
  7. .blur-item {
  8. transition: 1s cubic-bezier(.19,1,.22,1);
  9. will-change: transform;
  10. filter: blur(0);
  11. opacity: 1;
  12. }
  13. .blur-hidden {
  14. position: absolute;
  15. top: calc(50% + 7px);
  16. left: 50%;
  17. transform: translate(-50%, -50%);
  18. opacity: 0;
  19. transition: $transition-base;
  20. z-index: 100;
  21. }
  22. &:hover {
  23. .blur-item {
  24. opacity: .8;
  25. filter: blur(10px);
  26. transform: scale(.95);
  27. z-index: 1;
  28. }
  29. .blur-hidden {
  30. opacity: 1;
  31. top: 50%;
  32. }
  33. }
  34. }