.product-miniature .thumbnails-rollover { display: inline-block; margin: 0 auto; position: relative; overflow: hidden; } .product-miniature .thumbnails-rollover img { transition: all 0.5s ease; opacity: 1; } .product-miniature .thumbnails-rollover img:nth-child(2) { position: absolute; left: 0; top: 0; opacity: 0; } .product-miniature .thumbnails-rollover.horizontal_slide img { transform: translateX(0); } .product-miniature .thumbnails-rollover.horizontal_slide img:nth-child(2) { transform: translateX(100%); } .product-miniature .thumbnails-rollover.vertical_slide img { transform: translateY(0); } .product-miniature .thumbnails-rollover.vertical_slide img:nth-child(2) { transform: translateY(100%); } .product-miniature:hover .thumbnails-rollover img { opacity: 0; } .product-miniature:hover .thumbnails-rollover img:nth-child(2) { opacity: 1; } .product-miniature:hover .thumbnails-rollover.horizontal_slide img { transform: translateX(-100%); } .product-miniature:hover .thumbnails-rollover.horizontal_slide img:nth-child(2) { transform: translateX(0); } .product-miniature:hover .thumbnails-rollover.vertical_slide img { transform: translateY(-100%); } .product-miniature:hover .thumbnails-rollover.vertical_slide img:nth-child(2) { transform: translateY(0); } .product-miniature .thumbnails-carousel { position: relative; } .product-miniature .thumbnails-carousel .carousel-control { display: flex; flex-direction: column; justify-content: center; } .product-miniature .thumbnails-carousel .carousel-indicators { white-space: nowrap; display: flex; left: 50%; right: auto; justify-content: flex-start; margin: 0; transform: translateX(-50%); width: auto; transition: bottom .3s; overflow: hidden; } .product-miniature .thumbnails-carousel .carousel-indicators li { box-sizing: border-box; margin: 0 4px; flex: 0 0 auto; width: 20px; height: 20px; transition: .5s; text-indent: inherit; background-clip: inherit; } .product-miniature .thumbnails-carousel .carousel-indicators li img { margin: 0; } .product-miniature .thumbnails-carousel.gallery .carousel-indicators { width: calc(100% - 8px); } .product-miniature .thumbnails-carousel.gallery .carousel-indicators li { border: none; background: none; height: auto; margin: 0; padding: 0 4px; } .product-miniature .thumbnails-carousel.gallery .carousel-indicators li img { opacity: 0.3; border: 3px solid white; } .product-miniature .thumbnails-carousel.gallery .carousel-indicators li.active img { opacity: 1; border: 3px solid black; } .product-miniature:hover .thumbnails-carousel .carousel-indicators { bottom: 80px; }