Custom Gallery Carousel

[Beppe Enrici]

Hello, how can I change these Gallery Carousel Settings?

– change color on thumbnail hover (Style > Gallery Thumbnail > Thumbnail Hover Background Color doesn’t work)
– insert border on thumbnail hover
– make all image active instead of arrows on right top corner

This is my website page: https://www.solidweb.cloud/collezioni/ball-beach/

Thanks

[Veena]

1. will get back to you regarding thumbnail hover.

2.Pls have the below custom CSS in plugin settings > custom CSS

.lae-gallery-carousel .lae-gallery-carousel-item .lae-project-image:hover img {
    border: 3px solid black;
} 

3. Query not clear. Atpresent whole img is active.

[Beppe Enrici]

Thanks for your answer.

1) OK, I’ll wait
2) OK, it works
3) I would like to click in every part of image and open the lightbox full image; now I need to click just on the 4 arrows on the top right

[Raghavendra]

To make the image clickable anywhere to open lightbox, pls use the following custom CSS until we patch the carousel for this –

.lae-gallery-carousel .lae-gallery-carousel-item .lae-project-image .lae-image-info .lae-lightbox-item.lae-click-anywhere {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            }

 .lae-gallery-carousel .lae-gallery-carousel-item .lae-project-image .lae-image-info .lae-lightbox-item i {
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            color: #fff;
            font-size: 22px;
            line-height: 1;
            padding: 12px;
            -webkit-transition: all .3s ease-in-out 0s;
            transition: all .3s ease-in-out 0s; }

[Beppe Enrici]

Great, it works 🙂
Now I just need to change dark grey overlay, and everything’s fine
thank you

[Veena]

1.Pls have the below custom css and check –

.lae-gallery-carousel .lae-gallery-carousel-item .lae-project-image::after  {
height: 100%; 
content: ""; 
background: rgba(0,128,0.3); 
position: absolute; 
top: 0;
left: 0px; 
right: 0px;
opacity: 0;
}
.lae-gallery-carousel .lae-gallery-carousel-item .lae-project-image:hover::after,
.lae-gallery-carousel .lae-gallery-carousel-item .lae-project-image:hover::before  { 
opacity: 1;
 }
.lae-gallery-carousel .lae-gallery-carousel-item .lae-project-image:hover .lae-image-info .lae-lightbox-item {
    z-index: 99999;
}
.lae-gallery-carousel .lae-gallery-carousel-item .lae-project-image .lae-image-info .lae-entry-info {
    z-index: 99;
}

Pls change the color as per your choice.

[Beppe Enrici]

Sorry, but this is not what I wanted…

Applying the code, the new color hide completely the image.

I need to see the image clearly, also when mouse is over, with a very light grey hover trasparency; if it’s not possible, I’d prefer no overlay color and no arrows icons at all.

Thanks for your patience

[Beppe Enrici]

First one is the wrong solution, second one is the correct solution.

[Veena]

Sorry i thought you want to change the hover bg color.
You can use the below custom CSS –

.lae-gallery-carousel .lae-gallery-carousel-item .lae-project-image:hover img {
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
}

[Author]

Posts