You are here

Home » API reference » Slick Carousel 7.2

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

Same filename and directory in other branches
  1. 8.2 css/components/slick.thumbnail--hover.css
  2. 8 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: absolute;

  11.   text-align: center;

  12.   white-space: nowrap;

  13.   width: 100%;

  14.   z-index: 3;

  15. }

  16. 

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

  18.   content: "";

  19.   display: table;

  20.   clear: both;

  21. }

  22. 

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

  24.   overflow: hidden;

  25.   position: relative;

  26.   vertical-align: top;

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

  28. }

  29. 

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

  31.   background: #fff;

  32.   border: 2px solid transparent;

  33.   display: block;

  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: -60px 0 0 -60px;

  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. }

  55. 

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

  57.   pointer-events: none;

  58. }

  59. 

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

  61.   border: 7px solid transparent;

  62.   border-bottom: 0;

  63.   border-top-color: #ff6d2c;

  64.   bottom: -7px;

  65.   content: '';

  66.   display: block;

  67.   height: 0;

  68.   left: 50%;

  69.   margin: 0 0 0 -7px;

  70.   position: absolute;

  71.   width: 0;

  72. }

  73. 

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

  75.   overflow: visible;

  76. }

  77. 

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

  79.   bottom: 120%;

  80.   margin-top: -20px;

  81.   opacity: 1;

  82.   visibility: visible;

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

  84.   transition-delay: 0s;

  85.   z-index: 3;

  86. }

  87. 

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

  89. .slick .slick-dots--thumbnail-hover li.slick-active img {

  90.   border: 2px solid #ff6d2c;

  91.   opacity: 1;

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

  93.   transition-delay: 0s;

  94. }

  95. 

  96. /**

  97.  * Misc.

  98.  */

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

  100.   margin-left: 0;

  101.   padding: 0;

  102. }