You are here

Home » API reference » Media Hero Slider 8.5

varbase-heroslider-media.component.css in Media Hero Slider 8.5

Same filename and directory in other branches
  1. 8.6 css/component/varbase-heroslider-media.component.css
/* Varbase Hero slider media style */
.varbase-heroslider-media .slick-slide .slide__caption {
  position: absolute;
  left: 0;
  bottom: 20%;
  top: auto;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
  transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
  transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;
}
.varbase-heroslider-media .slick-slide .img-responsive {
  -webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
}
.varbase-heroslider-media .slick-slide .unpublished {
  padding: 0;
  height: auto;
}
.varbase-heroslider-media .slick-active .slide__caption {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.varbase-heroslider-media .slick-active .img-responsive {
  webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.varbase-heroslider-media .node--type-varbase-heroslider-media.node--view-mode-full {
  position: relative;
}
.varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {
  position: absolute;
  bottom: 7%;
  padding: 1.2em;
  z-index: 999;
  width: 100%;
}

File

css/component/varbase-heroslider-media.component.css
View source 
  1. /* Varbase Hero slider media style */

  2. .varbase-heroslider-media .slick-slide .slide__caption {

  3.   position: absolute;

  4.   left: 0;

  5.   bottom: 20%;

  6.   top: auto;

  7.   opacity: 0;

  8.   filter: alpha(opacity=0);

  9.   -webkit-transform: scale(0.95);

  10.   transform: scale(0.95);

  11.   -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  12.   transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  13.   transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  14.   transition: transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 0s cubic-bezier(0.19, 1, 0.22, 1) 1.25s;

  15. }

  16. .varbase-heroslider-media .slick-slide .img-responsive {

  17.   -webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  18.   transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  19.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  20.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  21.   -webkit-transform: scale(1.15);

  22.   transform: scale(1.15);

  23. }

  24. .varbase-heroslider-media .slick-slide .unpublished {

  25.   padding: 0;

  26.   height: auto;

  27. }

  28. .varbase-heroslider-media .slick-active .slide__caption {

  29.   opacity: 1;

  30.   filter: alpha(opacity=100);

  31.   -webkit-transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  32.   transition: opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  33.   transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  34.   transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, opacity 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s, -webkit-transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;

  35.   -webkit-transform: scale(1);

  36.   transform: scale(1);

  37. }

  38. .varbase-heroslider-media .slick-active .img-responsive {

  39.   webkit-transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  40.   transition: -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  41.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  42.   transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-transform 3s cubic-bezier(0.19, 1, 0.22, 1) 0s;

  43.   -webkit-transform: scale(1);

  44.   transform: scale(1);

  45. }

  46. .varbase-heroslider-media .node--type-varbase-heroslider-media.node--view-mode-full {

  47.   position: relative;

  48. }

  49. .varbase-heroslider-media .node--type-varbase-heroslider-media .hero-slide-content {

  50.   position: absolute;

  51.   bottom: 7%;

  52.   padding: 1.2em;

  53.   z-index: 999;

  54.   width: 100%;

  55. }