(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Requirements for Text Slice Reveal Animation (only for custom CSS method) in Elementor –
1 – Elementor Pro (Custom CSS) OR
2 – Any Alternative CSS Option
We will be making below Animated Image Carousel.
service1 is CSS class for container
@media (min-width: 1025px) is used for devices over 1024px width (Desktops)
@media (max-width: 1024px) is used for devices below 1024px width (Tablet)
@media (max-width: 767px) is used for devices below 767px width (Mobile)
/*Desktop CSS*/
@media (min-width: 1025px) {
.service1 {
transition: 0.3s;
}
.service1:hover {
width: 50%;
}
}
/*Tablet CSS*/
@media (max-width: 1024px) {
.service1 {
height: 200px;
transition: 0.3s;
}
.service1:hover {
height: 300px;
}
}
/*Mobile CSS*/
@media (max-width: 767px) {
.service1 {
height: 200px;
transition: 0.3s;
}
.service1:hover {
height: 300px;
}
}