You are here

Home » API reference » Slick Carousel 8

slick.thumbnail--hover.css in Slick Carousel 8

Same filename and directory in other branches
  1. 8.2 css/components/slick.thumbnail--hover.css
  2. 7.2 css/components/slick.thumbnail--hover.css

Thumbnails hoverable inside dots.

File

css/components/slick.thumbnail--hover.css
View source 
  1. /**

  2.  * @file

  3.  * Thumbnails hoverable inside dots.

  4.  */

  5. 

  6. /* The main thumbnail container is slick-dots modifier */

  7. .slick .slick-dots--thumbnail-hover {

  8.   list-style: none;

  9.   overflow: visible;

  10.   position: relative;

  11.   text-align: center;

  12.   width: 100%;

  13.   z-index: 3;

  14. }

  15. 

  16. .slick .slick-dots--thumbnail-hover::after {

  17.   content: "";

  18.   display: table;

  19.   clear: both;

  20. }

  21. 

  22. .slick .slick-dots--thumbnail-hover li {

  23.   overflow: hidden;

  24.   position: relative;

  25.   vertical-align: top;

  26.   /* Individual thumbnail, adjust accordingly to actual thumbnail size */

  27. }

  28. 

  29. .slick .slick-dots--thumbnail-hover li img {

  30.   background: #fff;

  31.   border: 2px solid transparent;

  32.   display: block;

  33.   opacity: .6;

  34.   -webkit-transition: 0.3s;

  35.   transition: 0.3s;

  36.   /* Overrides core > 1.3.11, otherwise thumbnails are non-clickable */

  37.   pointer-events: auto;

  38. }

  39. 

  40. .slick .slick-dots--thumbnail-hover li .slick-dots__thumbnail {

  41.   bottom: 140%;

  42.   left: 50%;

  43.   margin: -60px 0 0 -60px;

  44.   min-width: 120px;

  45.   opacity: 0;

  46.   overflow: visible;

  47.   position: absolute;

  48.   visibility: hidden;

  49.   width: 120px;

  50.   z-index: -1;

  51.   -webkit-transition: 0.3s;

  52.   transition: 0.3s;

  53. }

  54. 

  55. .slick .slick-dots--thumbnail-hover li .slick-dots__thumbnail img {

  56.   pointer-events: none;

  57. }

  58. 

  59. .slick .slick-dots--thumbnail-hover li .slick-dots__thumbnail::after {

  60.   border: 7px solid transparent;

  61.   border-bottom: 0;

  62.   border-top-color: #ff6d2c;

  63.   bottom: -7px;

  64.   content: '';

  65.   display: block;

  66.   height: 0;

  67.   left: 50%;

  68.   margin: 0 0 0 -7px;

  69.   position: absolute;

  70.   width: 0;

  71. }

  72. 

  73. .slick .slick-dots--thumbnail-hover li:hover {

  74.   overflow: visible;

  75. }

  76. 

  77. .slick .slick-dots--thumbnail-hover li:hover .slick-dots__thumbnail {

  78.   bottom: 120%;

  79.   margin-top: -20px;

  80.   opacity: 1;

  81.   visibility: visible;

  82.   -webkit-transition-delay: 0s;

  83.   transition-delay: 0s;

  84.   z-index: 3;

  85. }

  86. 

  87. .slick .slick-dots--thumbnail-hover li:hover img,

  88. .slick .slick-dots--thumbnail-hover .slick-active img {

  89.   border: 2px solid #ff6d2c;

  90.   opacity: 1;

  91.   -webkit-transition-delay: 0s;

  92.   transition-delay: 0s;

  93. }

  94. 

  95. /**

  96.  * Misc.

  97.  */

  98. .block .slick .slick-dots--thumbnail-hover {

  99.   margin-left: 0;

  100.   padding: 0;

  101. }

  102. 

  103. @media (min-width: 720px) {

  104.   .slick .slick-dots--thumbnail-hover {

  105.     position: absolute;

  106.   }

  107. }