Advertisement
oscarviedma

Estilos CSS OV Swiper.js - Ejercicio Blog Slider

Dec 17th, 2020
272
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.55 KB | None | 0 0
  1. /* Estilos Articulos Blog */
  2. .ov-slider-blog .et_pb_post {
  3. box-shadow: 0px 12px 20px -6px rgba(0,0,0,0.12);
  4. background-color: #fff;
  5. }
  6.  
  7. .ov-slider-blog .et_pb_post {
  8. padding-bottom: 25px;
  9. }
  10. .ov-slider-blog .et_pb_post .entry-title,
  11. .ov-slider-blog .et_pb_post .post-meta,
  12. .ov-slider-blog .et_pb_post .post-content {
  13. padding-right: 20px;
  14. padding-left: 20px;
  15. }
  16.  
  17. .ov-slider-blog .et_pb_post .entry-featured-image-url {
  18. margin-bottom: 20px;
  19. }
  20.  
  21. .ov-slider-blog .et_pb_post .more-link {
  22. display: inline-block !important;
  23. text-transform: capitalize;
  24. background-color: rgba(0,0,0,0.08)!important;
  25. padding: 3px 12px;
  26. border-radius: 100px;
  27. margin-top: 20px;
  28. transition: all 300ms ease 0ms;
  29. }
  30. .ov-slider-blog .et_pb_post .more-link:hover {
  31. background-color: #000000 !important;
  32. transition: all 300ms ease 0ms;
  33. }
  34.  
  35. .ov-slider-blog .et_pb_post .entry-featured-image-url {
  36. overflow: hidden;
  37. }
  38. .ov-slider-blog .et_pb_post .entry-featured-image-url img {
  39. transition-duration: 1s;
  40. }
  41. .ov-slider-blog .et_pb_post .entry-featured-image-url:hover img {
  42. transform: scale(1.2);
  43. transition-duration: 1s;
  44. }
  45.  
  46. /* Estilos iconos de siguiente - anterior */
  47. .ov-swiper-button-next, .ov-swiper-button-prev {
  48. position: absolute;
  49. background: rgba(0,0,0,0.9);
  50. width: 30px;
  51. height: 30px;
  52. padding: 30px;
  53. border-radius: 0px;
  54. line-height: 0;
  55. display: flex;
  56. align-items: center;
  57. justify-content: center;
  58. cursor: pointer;
  59. top: 35%;
  60. z-index: 10;
  61. }
  62.  
  63. .ov-swiper-button-next {
  64. right: -110px;
  65. }
  66.  
  67. .ov-swiper-button-prev {
  68. left: -110px;
  69. }
  70.  
  71. .ov-swiper-button-next::after, .ov-swiper-button-prev::after {
  72. font-family: etmodules;
  73. color: #fff;
  74. font-size: 32px;
  75. }
  76.  
  77. .ov-swiper-button-next::after {
  78. content: '\24';
  79. }
  80.  
  81. .ov-swiper-button-prev::after {
  82. content: '\23';
  83. }
  84.  
  85. /* Paginación bullets */
  86. .ov-swiper-pagination {
  87. text-align: center;
  88. }
  89.  
  90. .swiper-pagination-bullet {
  91. margin: 0 5px;
  92. }
  93.  
  94. .swiper-pagination-bullet-active {
  95. background: #000 !important;
  96. }
  97.  
  98. @media only screen and (max-width: 980px) {
  99. .ov-swiper-button-next {
  100. right: -80px;
  101. }
  102. .ov-swiper-button-prev {
  103. left: -80px;
  104. }
  105. }
  106.  
  107. @media only screen and (max-width: 768px) {
  108. .ov-swiper-button-next, .ov-swiper-button-prev {
  109. width: 20px;
  110. height: 20px;
  111. padding: 20px;
  112. }
  113. .ov-swiper-button-next {
  114. right: -30px;
  115. }
  116. .ov-swiper-button-prev {
  117. left: -30px;
  118. }
  119. .ov-swiper-button-next::after, .ov-swiper-button-prev::after {
  120. font-size: 28px;
  121. line-height: 0;
  122. }
  123. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement