Tag: css animation

Creating an engaging website requires more than just placing static elements on a page. One effective way to enhance the user experience is by using interactive elements, like sliders. In this tutorial, I’ll show you how to transform static columns into an animated slider using Elementor and CSS. This step-by-step guide will demonstrate how to convert a static section with columns in the Elementor WordPress plugin into a sliding column slider using only CSS and Elementor settings. A tutorial video is included at the end for visual learners. Read to the end to see the video tutorial.

What You’ll Need To Know

• Basic knowledge of CSS, HTML, and Elementor
• Access to the Elementor plugin on your WordPress website

Step-by-Step Guide to Create the Image Slider

Step 1: Understanding the Concept

We are going to convert static column images into sliding images. When you hover over a column, it expands to show some text, while the other columns become slightly darker with an overlay. This creates a dynamic, interactive effect that enhances user engagement.

Step 2: Setting Up the Static Columns

1. Add a Section in Elementor and divide it into four columns.
2. Insert Images into each column. These will serve as the content that will slide.
3. Ensure Each Column Has a Fixed Height – This is essential for smooth transitions and to avoid jumping effects.

Step 3: Adding the Required CSS

1. Go to WordPress Dashboard > Appearance > Customize > Additional CSS.
2. Add the following CSS code:
   
3. Adjust CSS Values as per your design requirements, like transition duration and width percentages.

.fcc { display:none; }

@media (min-width: 479px) {



.elementor-element-0549d70 .elementor-column{
      transition: all 0.6s cubic-bezier(.42,.41,.5,.49);
	height: 779.5px;
	    font-size: 26px;
    text-align: center;
}



section.elementor-element-0549d70:hover {
   /* width: 132vw !important; */ 
}


.elementor-element-0549d70 .elementor-column:nth-child(1):hover {
    width: 40% !important; 
}
.elementor-element-0549d70 .elementor-column:nth-child(2):hover {
    width: 40% !important; 
}
.elementor-element-0549d70 .elementor-column:nth-child(3):hover {
    width: 40% !important; 
}
.elementor-element-0549d70 .elementor-column:nth-child(4):hover {
    width: 40% !important; 
}




 
.elementor-element-0549d70 .elementor-column:nth-child(1):hover p {display:none; }

.fwt{ color: white;}
.fgt { color: white;}

.elementor-element-0549d70 .elementor-column:nth-child(1):hover .fcc, 
.elementor-element-0549d70 .elementor-column:nth-child(2):hover .fcc,
.elementor-element-0549d70 .elementor-column:nth-child(3):hover .fcc,
.elementor-element-0549d70 .elementor-column:nth-child(4):hover .fcc {
    display: block;
    margin: auto;
     
}

.elementor-element-0549d70 .elementor-column:nth-child(1):hover p, 
.elementor-element-0549d70 .elementor-column:nth-child(2):hover p,
.elementor-element-0549d70 .elementor-column:nth-child(3):hover p,
.elementor-element-0549d70 .elementor-column:nth-child(4):hover p{
    display: none;
}
	
section.elementor-element-0549d70 .elementor-background-overlay
{background-color: #ff000000; 
opacity: 1;}


section.elementor-element-0549d70:hover .elementor-background-overlay
{background-color: #000000; 
opacity: 0.5;}
	
	
}

Step 4: Configuring Elementor Columns

1. Edit Each Column using Elementor.
2. Go to Style > Background Overlay.
3. Choose a color overlay (e.g., black) and set its Opacity to create a subtle darkening effect.
4. Set the Hover State: On hover, set the overlay to be transparent. This will give the active column a clearer, brighter look.

Step 5: Adding Text to Columns

1. Inside each column, Add a Text Widget.
2. Type your desired text (e.g., “Learn More”, “Explore”, etc.).
3. Hide the Text Initially by setting it to display: none using CSS.
4. Configure the CSS Hover Effect to reveal the text only when the column is hovered over.

Step 6: Replicate for All Columns

Repeat the above steps for all the columns. Make sure to tweak the CSS and adjust the text position if necessary to maintain a consistent look across the slider.

Step 7: Fine-Tuning the CSS and Making It Responsive

1. Adjust the Height and Width settings for different screen sizes using CSS Media Queries.
2. Ensure the slider works seamlessly across all devices. Consider creating a different version for mobile where the hover effect might be challenging to implement. @media (max-width: 768px) { .elementor-column { width: 100%; height: auto; transition: none; /* Disable the hover effect for mobile */ } }

Watch the Tutorial Video

For those who prefer a more visual approach, check out the tutorial video at the end of this article. It will walk you through each step of the process.

Conclusion

By following the steps above, you should now have a beautiful, interactive image slider on your Elementor website. This simple CSS trick can help make your website more engaging, giving your content a sleek, modern feel. Feel free to customize the CSS code to match your site’s branding and design.

If you encounter any issues or have suggestions for improvements, please leave a comment below. Don’t forget to like, share, and subscribe for more tutorials!

See you in the next video!