Custom Gallery Carousel

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #30264
    Beppe EnriciBeppe Enrici
    Participant

    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

    #30269
    VeenaVeena
    Moderator

    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.

    #30270
    Beppe EnriciBeppe Enrici
    Participant

    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

    #30275
    RaghavendraRaghavendra
    Moderator

    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; }
    #30278
    Beppe EnriciBeppe Enrici
    Participant

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

    #30286
    VeenaVeena
    Moderator

    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.

    #30292
    Beppe EnriciBeppe Enrici
    Participant

    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

    #30293
    Beppe EnriciBeppe Enrici
    Participant

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

    Attachments:
    #30296
    VeenaVeena
    Moderator

    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%);
    }
    
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Elementor Addons Support’ is closed to new topics and replies.