You are currently viewing Create Image Accordion with Elementor & CSS (No Plugin)

Create Image Accordion with Elementor & CSS (No Plugin)

(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;
    }
}

				
			

Leave a Reply