dimaslanjaka

slider

Mar 3rd, 2017
109
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.28 KB | None | 0 0
  1. .rslides {
  2.     position: relative;
  3.     list-style: none;
  4.     overflow: hidden;
  5.     width: 100%;
  6.     padding: 0;
  7.     margin: 0;
  8. }
  9. .rslides li {
  10.     -webkit-backface-visibility: hidden;
  11.     position: absolute;
  12.     display: none;
  13.     width: 100%;
  14.     left: 0;
  15.     top: 0;
  16. }
  17. .rslides li:first-child {
  18.     position: relative;
  19.     display: block;
  20.     float: left;
  21. }
  22. .rslides img {
  23.     display: block;
  24.     height: auto;
  25.     float: left;
  26.     width: 100%;
  27.     border: 0;
  28. }
  29. ul.featured-widget-list, ul.featured-widget-list li {
  30.     margin: 0;
  31.     padding: 0;
  32.     list-style: none;
  33.     position: relative }
  34. ul.featured-widget-list li {
  35.     display: none;
  36. }
  37. ul.featured-widget-list li:nth-child(1) {
  38.     display: block;
  39.     line-height: 0;
  40. }
  41. ul.featured-widget-list img {
  42.     border: 0;
  43.     width: 100%;
  44.     height: auto;
  45. }
  46. ul.featured-widget-list .featuredbg {
  47.     width: 100%;
  48.     height: 100%;
  49.     position: absolute;
  50.     z-index: 2;
  51.     left: 0;
  52.     top: 0;
  53.     opacity: .6;
  54.     background-image: url(https://3.bp.blogspot.com/-1_Vnfz23h0E/V0m7kzHpgiI/AAAAAAAALlU/f763ScY-PBc2UnqNX3Tf20lyvHxtRo9qwCLcB/s400/overlay-bg.png);
  55.     background-position: 0% 100%;
  56.     background-repeat: repeat-x;
  57. }
  58. ul.featured-widget-list .featuredbg:hover {
  59.     opacity: .1;
  60. }
  61. ul.featured-widget-list h5 {
  62.     position: absolute;
  63.     left: 0;
  64.     right: 0;
  65.     text-align: center;
  66.     bottom: 10px;
  67.     z-index: 2;
  68.     color: #fff;
  69.     margin: 0;
  70.     text-transform:  capitalize;
  71.     padding: 10px 20px;
  72.     line-height: 1.9em;
  73.     letter-spacing: 0.3px;
  74.     font:  600 16px 'Abel',  sans-serif;
  75.     overflow: hidden;
  76. }
  77. ul.featured-widget-list li:hover h5 {
  78.     bottom: 30px;
  79. }
  80. ul.featured-widget-list .featured-meta {
  81.     font:  11px 'Abel',  sans-serif;
  82.     letter-spacing: 0.3px;
  83.     position: absolute;
  84.     bottom: 0;
  85.     left: 0;
  86.     right: 0;
  87.     text-align: center;
  88.     z-index: 2;
  89.     color: #fff;
  90.     opacity: 0;
  91. }
  92. ul.featured-widget-list h5,  ul.featured-widget-list .featured-meta  {
  93.     -webkit-transition:  all 0.3s;
  94.     -moz-transition:  all 0.3s;
  95.     -o-transition:  all 0.3s;
  96.     transition:  all 0.3s;
  97. }
  98. ul.featured-widget-list li:hover .featured-meta {
  99.     bottom: 20px;
  100.     opacity: 1;
  101. }
  102. .feat-buttons {
  103.     position: absolute;
  104.     top: 50%;
  105.     left: 0;
  106.     z-index: 5;
  107.     width: 100%}
  108. .feat-buttons a {
  109.     text-indent: -9999px;
  110.     margin: 0 7px;
  111.     width: 15px;
  112.     height: 15px;
  113.     padding: 5px;
  114.     background: #000;
  115.     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  116.     filter:  alpha(opacity=60);
  117.     -moz-opacity: 0.6;
  118.     -khtml-opacity: 0.6;
  119.     opacity: 0.6;
  120.     position: relative;
  121.     -webkit-border-radius:  50%;
  122.     -moz-border-radius:  50%;
  123.     border-radius:  50%;
  124. }
  125. .feat-prev {
  126.     float: left;
  127. }
  128. .feat-next {
  129.     float: right;
  130. }
  131. .feat-buttons a.feat-prev::before,  .feat-buttons a.feat-next::before {
  132.     content: "";
  133.     width: 0;
  134.     height: 0;
  135.     border-width: 6px 7px;
  136.     border-style: solid;
  137.     border-color: transparent #fff transparent transparent;
  138.     position: absolute;
  139.     top: 50%;
  140.     margin-top: -6px;
  141.     margin-left: -11px;
  142.     left: 50%}
  143. .feat-buttons a.feat-next::before {
  144.     border-color: transparent transparent transparent #fff;
  145.     margin-left: -3px;
  146. }
Advertisement
Add Comment
Please, Sign In to add comment