Table of Contents
How to add elementor media carousel text captions using CSS only! No plugins needed!
First, add Captions to every 'Slides' in the Elementor Media Carousel
Place various inner sections in this column. Every inner section will become a slide of this Elementor vertical carousel.
Then, set overlay to 'Text' and caption to 'Caption'
Finally, add this CSS to enable the Elementor media carousel text captions!
Under the Custom CSS for the element is a good place.
body .elementor-section .elementor-carousel-image-overlay {
background-color: transparent;
color: black; /* Change the color here to change the color of the caption */
font-size: 23px; /* Change the font size here to change the size of the caption */
height:30px;
top:107%;/* Slightly increase or decrease this value to position the caption */
opacity: 1!important;
transform:none!important;
}
body .elementor-section .swiper-slide {
overflow: visible;
}
body .elementor-section .swiper-container {
padding-bottom: 90px;
}
That's all! Enjoy your Elementor Media Carousel Captions!
Watch the video for more info! Let me know if everything works for you!
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
Looking for something else? Search across 2445 Elements right here:
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
Comments
22 Responses
Thank you for helping me to solution this problem.
Welcome!
is there a way to edit the style of the caption? for example, i would like to add a bold title followed by a normal caption
Hey Dyanna! Yes this is possible. You will need to use HTML in the 'caption' field. Such as the following :
Then, to accomodate for the 2 or 3 lines of text, you will need greater height, top and padding-bottom values in the CSS. Here is my full CSS now :
body .elementor-section .elementor-carousel-image-overlay {
background-color: transparent;
color: black; /* Change the color here to change the color of the caption */
font-size: 23px; /* Change the font size here to change the size of the caption */
height:48px;
top:118%;/* Slightly increase or decrease this value to position the caption */
opacity: 1!important;
transform:none!important;
}
body .elementor-section .swiper-slide {
overflow: visible;
}
body .elementor-section .swiper-container {
padding-bottom: 140px;
}
Can this be done also in the Elementor Pro Gallery widget?
I would like to make the titles of the images in the gallery visible, not only when hovering on the images, but permanent. I don't see a setting to achieve this. Which custom css could I use?
https://staging.bewoners-stadseiland.nl/monitoring-bloemrijke-bermen/
Thanks a lot in advance,
Best Regards, Otto
omunters@xs4all.nl
Simply add this CSS for this :
.elementor-gallery-item__title {
opacity: 1!important;
}
It works like a charm, thank you Maxime!
I posted the same question in the Elementor forum and left your solution there.
Best regards, Otto
There is a way to make the text selectable and dont go to the media?
Also for the html text in captions im using " " At the end I need to put and when I want to finish with the color I put
Not elegant but do the job
Brilliant - thank you!
Welcome!
Thanks you! Very useful!
Is it possible to add the touch swipe effect to media carousel?
My client wants more than one of these on the same page. How do I limit the css to ONLY change on one of the carousels instead of all of them on the same page? I know it's got to be super easy... but I'm stumped (overthinking?)...
Give your media carousel the class name 'custom-carousel' , then add this code instead of the one above:
body .elementor-section .custom-carousel .elementor-carousel-image-overlay { background-color: transparent; color: black; /* Change the color here to change the color of the caption */ font-size: 23px; /* Change the font size here to change the size of the caption */ height:30px; top:107%;/* Slightly increase or decrease this value to position the caption */ opacity: 1!important; transform:none!important; } body .elementor-section .custom-carousel .swiper-slide { overflow: visible; } body .elementor-section .custom-carousel .swiper-container { padding-bottom: 90px; }I would keep the border radius on images (30px) but this piece of code bellow transform the border radius on 0px because of the swiper-slide class instead of carrousel media. How can I do? Thanks
body .elementor-section .swiper-slide { overflow: visible; }
Hi
No overlay option from Slideshow, only Coverflow and Carousel.
Hi,
I am using Elementor Free, there is no "Overlay" option. Is there any way to put a comment inside carousel's images?
Thanks, Tin
Hey Tin!
Easiest is really just to get Elementor Pro. You could make it work with free, but it will cost you as much or much in custom work, than Pro.
Plzz Help! By applying the same step my captions are over-written I mean all slides' captions are showing at a time and making a mess.
Hey Annie! I could not say, not without seeing the page in question.
what i want if i need title and description shown in my carousel
I have Elementor Pro yet the code doesn't work on my end. Can you assist me?