This tutorial will show you how to add text in the Image Carousel widget in Elementor. We will start with a simple design and then see how to create an on-hover text overlay effect.
The carousel will look like this at the end.
Steps to Add Text in Image Carousel in Elementor
Step 1: Add an Image Carousel Widget
Open Elementor and go to the page where you want the carousel.
Drag and drop the Image Carousel widget onto your page.
Step 2: Add the Images and Caption to the Images
Add the images, or edit the gallery if you have already selected images.
Select the images from the Media Library and enter the text you want to show to the Caption box for each selected image.
Finally, insert the images into the carousel.
Step 3: Show the Caption under Images
Scroll down and set the Caption None to Caption.
The caption we set earlier will now display under each image. You may have noticed options like Title and Description; you can also use these instead of the caption.
If you only need this simple design, the tutorial is finished!
We will also see how to add an on-hover text overlay effect on the images.
Add an On-Hover Text Overlay Effect to the Images
Go to the Advanced tab of the carousel widget.
Add the CSS ID carousel-text-overlay.
Then, add the CSS below to Custom CSS.
div#carousel-text-overlay {
position: relative;
}
/* Set the caption to be centered and hidden initially */
div#carousel-text-overlay .elementor-image-carousel-caption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
z-index: 2; /* Places caption above overlay */
opacity: 0; /* Initially hide the caption */
transition: opacity 0.3s ease; /* Smooth transition for caption */
}
/* Set up the overlay pseudo-element */
.swiper-slide-inner::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 98%; /* Increase or decrease to match the image height */
background-color: rgb(0 0 0 / 50%); /* Light dark overlay */
z-index: 1;
opacity: 0;
transition: opacity 0.3s ease;
}
/* Show caption and overlay on hover */
.swiper-slide-inner:hover .elementor-image-carousel-caption {
opacity: 1 !important;
}
.swiper-slide-inner:hover::before {
opacity: 1;
}
This CSS will add a nice on-hover text overlay effect.
You can change the text size and color from the default Style Tab.
If you have any questions, feel free to leave a comment below. I will try my best to answer.
