You are here

Home » API reference » Slick Carousel 8.2

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

Same filename and directory in other branches
  1. 8 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.   margin: auto;

  34.   opacity: .6;

  35.   -webkit-transition: 0.3s;

  36.   transition: 0.3s;

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

  38.   pointer-events: auto;

  39. }

  40. 

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

  42.   bottom: 140%;

  43.   left: 50%;

  44.   margin: 0;

  45.   min-width: 120px;

  46.   opacity: 0;

  47.   overflow: visible;

  48.   position: absolute;

  49.   visibility: hidden;

  50.   width: 120px;

  51.   z-index: -1;

  52.   -webkit-transition: 0.3s;

  53.   transition: 0.3s;

  54.   -webkit-transform: translate(-50%, 0);

  55.   transform: translate(-50%, 0);

  56. }

  57. 

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

  59.   pointer-events: none;

  60. }

  61. 

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

  63.   border: 7px solid transparent;

  64.   border-bottom: 0;

  65.   border-top-color: #ff6d2c;

  66.   bottom: -7px;

  67.   content: '';

  68.   display: block;

  69.   height: 0;

  70.   left: 50%;

  71.   margin: 0 0 0 -7px;

  72.   position: absolute;

  73.   width: 0;

  74. }

  75. 

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

  77.   overflow: visible;

  78. }

  79. 

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

  81.   bottom: 120%;

  82.   margin-top: -20px;

  83.   opacity: 1;

  84.   visibility: visible;

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

  86.   transition-delay: 0s;

  87.   z-index: 3;

  88. }

  89. 

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

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

  92.   border: 2px solid #ff6d2c;

  93.   opacity: 1;

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

  95.   transition-delay: 0s;

  96. }

  97. 

  98. /**

  99.  * Misc.

  100.  */

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

  102.   margin-left: 0;

  103.   padding: 0;

  104. }

  105. 

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

  107.   .slick .slick-dots--thumbnail-hover {

  108.     position: absolute;

  109.   }

  110. }