Search code examples
csswordpresspluginslightbox

Problem with the Lightbox arrows in Portfolio (wordpress)

I am trying to modify my lightbox portfolio. Since I changed the arrows but now I need a slightly more complex modification. Check and click on any photo: https://iconsmgmt.com/models/

What CSS code should change so that the arrows only appear when the cursor poses on the photo?

.wppap-img-grp button.slick-prev, .wppap-img-grp button.slick-prev:hover, .wppap-img-grp button.slick-prev:focus {
    right: -10px;
    opacity: 1;
}
.wppap-img-grp button.slick-next, .wppap-img-grp button.slick-next:hover, .wppap-img-grp button.slick-next:focus {
    left: -10px;
    opacity: 1;
}

Thanks

Solution

  • Try This CSS instead of yours.

    .wppap-img-grp .slick-arrow{display:none !important;}
.wppap-img-grp:hover .slick-arrow{display:block !important;}