Advertisement
Guest User

Untitled

a guest
Jun 26th, 2014
269
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.64 KB | None | 0 0
  1.  
  2. .carousel
  3. {
  4. position: relative;
  5. overflow: hidden;
  6. padding: 2em 0 2em 0;
  7. }
  8.  
  9. .carousel .forward,
  10. .carousel .backward
  11. {
  12. position: absolute;
  13. top: 50%;
  14. width: 6em;
  15. height: 12em;
  16. margin-top: -6em;
  17. cursor: pointer;
  18. }
  19.  
  20. .carousel .forward
  21. {
  22. right: 0;
  23. }
  24.  
  25. .carousel .backward
  26. {
  27. left: 0;
  28. }
  29.  
  30. .carousel .forward:before,
  31. .carousel .backward:before
  32. {
  33. content: '';
  34. display: block;
  35. width: 6em;
  36. height: 6em;
  37. border-radius: 100%;
  38. background-color: rgba(72,57,73, 0.5);
  39. position: absolute;
  40. top: 50%;
  41. margin-top: -3em;
  42. -moz-transition: background-color 0.35s ease-in-out;
  43. -webkit-transition: background-color 0.35s ease-in-out;
  44. -o-transition: background-color 0.35s ease-in-out;
  45. -ms-transition: background-color 0.35s ease-in-out;
  46. transition: background-color 0.35s ease-in-out;
  47. -webkit-backface-visibility: hidden;
  48. }
  49.  
  50. .carousel .forward:after,
  51. .carousel .backward:after
  52. {
  53. content: '';
  54. width: 3em;
  55. height: 3em;
  56. position: absolute;
  57. top: 50%;
  58. margin: -1.5em 0 0 0;
  59. background: url('images/arrow.svg') no-repeat center center;
  60. }
  61.  
  62. .carousel .forward:after
  63. {
  64. right: -0.25em;
  65. }
  66.  
  67. .carousel .backward:after
  68. {
  69. left: -0.25em;
  70. -moz-transform: scaleX(-1);
  71. -webkit-transform: scaleX(-1);
  72. -o-transform: scaleX(-1);
  73. -ms-transform: scaleX(-1);
  74. transform: scaleX(-1);
  75. }
  76.  
  77. .carousel .forward:before
  78. {
  79. right: -3em;
  80. }
  81.  
  82. .carousel .backward:before
  83. {
  84. left: -3em;
  85. }
  86.  
  87. .carousel .forward:hover:before,
  88. .carousel .backward:hover:before
  89. {
  90. background-color: rgba(239,131,118, 0.75);
  91. }
  92.  
  93. .carousel .reel
  94. {
  95. white-space: nowrap;
  96. position: relative;
  97. -webkit-overflow-scrolling: touch;
  98. padding: 0 2em 0 2em;
  99. }
  100.  
  101. .carousel article
  102. {
  103. display: inline-block;
  104. width: 18em;
  105. background: #fff;
  106. text-align: center;
  107. padding: 0 1em 3em 1em;
  108. margin: 0 2em 0 0;
  109. white-space: normal;
  110. opacity: 1.0;
  111. -moz-transition: opacity 0.75s ease-in-out;
  112. -webkit-transition: opacity 0.75s ease-in-out;
  113. -o-transition: opacity 0.75s ease-in-out;
  114. -ms-transition: opacity 0.75s ease-in-out;
  115. transition: opacity 0.75s ease-in-out;
  116. }
  117.  
  118. .carousel article.loading
  119. {
  120. opacity: 0;
  121. }
  122.  
  123. .carousel article .image
  124. {
  125. position: relative;
  126. left: -1em;
  127. top: 0;
  128. width: auto;
  129. margin-right: -2em;
  130. margin-bottom: 3em;
  131. }
  132.  
  133. .carousel article p
  134. {
  135. text-align: center;
  136. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement