kazim000

Vinyl Showcase on Spacehey Profile Hotfix

Jan 10th, 2024
617
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.48 KB | None | 0 0
  1.  
  2.  
  3. /* Vinyl Showcase - www.kazimariusz.com */
  4.  
  5. #vinyl-gallery * {
  6. all: unset;
  7. }
  8.  
  9. #vinyl-gallery {
  10. all: initial!important;
  11. width: 100%!important;
  12. height: 230px!important;
  13. margin: 30px 0!important;
  14. display: flex!important;
  15. flex-direction: row!important;
  16. position: relative!important;
  17. margin-left: -6px!important;
  18. }
  19.  
  20. #vinyl-gallery .vinyl {
  21. all:unset!important;
  22. perspective: 500px !important;
  23. width: 18px!important;
  24. transition: width 0.5s!important;
  25. }
  26.  
  27. #vinyl-gallery .vinyl:hover {
  28. width: 148px!important;
  29. }
  30.  
  31. #vinyl-gallery img {
  32. all:unset!important;
  33. transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;
  34. width: 180px!important;
  35. height: 180px!important;
  36. transform: rotateX(0deg) rotateY(25deg)!important;
  37. transform-style: preserve-3d!important;
  38. border-radius: 4px!important;
  39. border: 2px solid rgba(0, 0, 0, 0.1)!important;
  40. object-fit: cover!important;
  41. }
  42.  
  43. #vinyl-gallery .vinyl:hover img {
  44. transform: rotateX(0deg) rotateY(10deg)!important;
  45. width: 188px!important;
  46. height: 188px!important;
  47. margin-top: -2px!important;
  48. }
  49.  
  50. #vinyl-gallery .title {
  51. display: block;
  52. visibility: hidden;
  53. position: absolute;
  54. bottom: 0px;
  55. text-align: center;
  56. width: 100%;
  57. padding-left: 6px;
  58. }
  59.  
  60. #vinyl-gallery .vinyl:nth-child(n):hover + .title {
  61. visibility: visible;
  62. }
  63.  
  64.  
Advertisement
Add Comment
Please, Sign In to add comment