main.css 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. /** CUSTOMISER **/
  2. .theme-cover {
  3. position: relative;
  4. text-align: center;
  5. }
  6. .theme-cover .overlay {
  7. width: 100%;
  8. height: 100%;
  9. position: absolute;
  10. top: 0;
  11. background-color: rgba(75,75,75,0.75);
  12. -webkit-transition: all 0.2s ease-in-out;
  13. transition: all 0.2s ease-in-out;
  14. }
  15. .theme-cover.active .overlay,
  16. .theme-cover:hover .overlay {
  17. background-color: rgba(0, 123, 255, 0.5);
  18. }
  19. .theme-cover img {
  20. display: block;
  21. position: relative;
  22. }
  23. .theme-cover h2 {
  24. text-transform: uppercase;
  25. color: #fff;
  26. text-align: center;
  27. position: absolute;
  28. width: 100%;
  29. top: 50%;
  30. font-size: 17px;
  31. padding: 10px;
  32. background: rgba(51, 51, 51, 0.75);
  33. -webkit-transform: translateY(-50%);
  34. -ms-transform: translateY(-50%);
  35. transform: translateY(-50%);
  36. -webkit-transition: all 0.2s ease-in-out;
  37. transition: all 0.2s ease-in-out;
  38. }
  39. .theme-cover.active h2,
  40. .theme-cover:hover h2 {
  41. top: 15px;
  42. -webkit-transform: translateY(15px);
  43. -ms-transform: translateY(15px);
  44. transform: translateY(15px);
  45. }
  46. .theme-cover span.info {
  47. position: absolute;
  48. display: block;
  49. width: 75%;
  50. top: calc(50% + 15px);
  51. left: 50%;
  52. text-transform: uppercase;
  53. color: #fff;
  54. border: 1px solid #fff;
  55. background-color: transparent;
  56. margin-top: 15px;
  57. padding: 10%;
  58. opacity: 0;
  59. transform-origin: left top;
  60. filter: alpha(opacity=0);
  61. -webkit-transform: scale(0) translateX(-50%) translateY(-50%);
  62. -ms-transform: scale(0) translateX(-50%) translateY(-50%);
  63. transform: scale(0) translateX(-50%) translateY(-50%);
  64. -webkit-transition: all 0.2s ease-in-out;
  65. transition: all 0.2s ease-in-out;
  66. }
  67. .theme-cover.active span.info,
  68. .theme-cover:hover span.info {
  69. opacity: 1;
  70. filter: alpha(opacity=100);
  71. -webkit-transform: scale(1) translateX(-50%) translateY(-50%);
  72. -ms-transform: scale(1) translateX(-50%) translateY(-50%);
  73. transform: scale(1) translateX(-50%) translateY(-50%);
  74. }
  75. .theme-cover span.info:hover {
  76. box-shadow: 0 0 5px #fff;
  77. }
  78. .customiser .card-footer > div {
  79. position: absolute;
  80. right: 5px;
  81. top: 50%;
  82. transform: translateY(-50%);
  83. }