Support Forums for LiveMesh Themes & Plugins › Forums › Elementor Addons Support › Custom Gallery Carousel
- This topic has 8 replies, 3 voices, and was last updated 5 years, 11 months ago by Veena.
-
AuthorPosts
-
May 23, 2018 at 9:18 am #30264Beppe EnriciParticipant
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 cornerThis is my website page: https://www.solidweb.cloud/collezioni/ball-beach/
Thanks
May 24, 2018 at 7:35 am #30269VeenaModerator1. 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.
May 24, 2018 at 9:13 am #30270Beppe EnriciParticipantThanks 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 rightMay 25, 2018 at 11:35 am #30275RaghavendraModeratorTo 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; }
May 25, 2018 at 12:06 pm #30278Beppe EnriciParticipantGreat, it works 🙂
Now I just need to change dark grey overlay, and everything’s fine
thank youMay 26, 2018 at 3:14 am #30286VeenaModerator1.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.
May 28, 2018 at 7:14 am #30292Beppe EnriciParticipantSorry, 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
May 28, 2018 at 7:20 am #30293Beppe EnriciParticipantFirst one is the wrong solution, second one is the correct solution.
May 28, 2018 at 10:24 am #30296VeenaModeratorSorry 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%); }
-
AuthorPosts
- The forum ‘Elementor Addons Support’ is closed to new topics and replies.