Looking for an elegant way to showcase your images with an interactive accordion effect? Here’s a simple solution you can implement without any plugins. This accordion slider expands images on hover and works perfectly with Elementor or any other website builder.
Features
The slider includes several key features:
- Smooth accordion effect on hover
- Fully responsive across all devices
- Custom titles with clickable links
- Easy to customize
- No plugins required
- Lightweight and fast loading
How It Works
The slider utilizes flexbox for layout and CSS transitions for smooth animations. On desktop screens, images are arranged horizontally and expand when hovered over. On mobile devices, it automatically switches to a vertical layout for better user experience. The titles appear in an elegant overlay when hovering over each image.
Image Optimization
For optimal performance of your accordion slider, using properly optimized images is crucial. For WebP conversion and image optimization, you can use this free tool:
This tool allows you to:
- Convert your images to WebP format
- Optimize image size without quality loss
- Maintain proper dimensions for the slider (700x700px recommended)
- Reduce loading time of your accordion slider
Steps for image optimization:
- Visit https://umbertoberti.com/optimized-image/
- Upload your original image
- Download the optimized WebP version
- Replace the image URL in the accordion slider code
- Test the slider to ensure smooth loading
Remember to use meaningful alt text for your images after optimization for better SEO and accessibility. The optimized WebP images will significantly improve your slider’s loading speed while maintaining high visual quality.
Implementation
Here’s the complete code you can copy directly into your Elementor HTML widget:
<style>
.accordion-container {
display: flex;
width: 100%;
height: 500px;
overflow: hidden;
}
.accordion-slide {
position: relative;
flex: 0.25;
transition: all 0.5s ease;
overflow: hidden;
}
.accordion-slide:hover {
flex: 1;
}
.accordion-slide img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slide-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
padding: 20px;
opacity: 0;
transition: opacity 0.3s ease;
}
.accordion-slide:hover .slide-content {
opacity: 1;
}
.slide-title {
margin: 0;
font-size: 1.5rem;
line-height: 1.2;
}
.slide-title a {
color: #ffffff !important;
text-decoration: none;
transition: color 0.3s ease;
display: inline-block;
}
.slide-title a:hover {
color: #e6e6e6 !important;
}
/* Tablet */
@media screen and (max-width: 1024px) {
.accordion-container {
height: 400px;
}
.slide-title {
font-size: 1.25rem;
}
}
/* Mobile */
@media screen and (max-width: 767px) {
.accordion-container {
flex-direction: column;
height: auto;
min-height: 700px;
}
.accordion-slide {
flex: 1;
min-height: 190px !important;
height: 190px !important;
max-height: 200px;
transition: all 0.5s ease;
}
.accordion-slide:hover {
flex: 3;
min-height: 200px !important;
height: 200px !important;
max-height: 290px;
}
.accordion-slide:last-child {
min-height: 200px !important;
height: 200px !important;
flex: 1;
}
.accordion-slide:last-child:hover {
min-height: 200px !important;
height: 200px !important;
flex: 3;
}
.slide-title {
font-size: 1.1rem;
}
.slide-content {
padding: 15px;
}
}
</style>
<div class="accordion-container">
<div class="accordion-slide">
<img decoding="async" src="https://yoursite.com/wp-content/uploads/2025/02/image1.webp" alt="Slide 1">
<div class="slide-content">
<h2 class="slide-title"><a href="https://yoursite.com/page1">Slide 1</a></h2>
</div>
</div>
<div class="accordion-slide">
<img decoding="async" src="https://yoursite.com/wp-content/uploads/2025/02/image2.webp" alt="Slide 2">
<div class="slide-content">
<h2 class="slide-title"><a href="https://yoursite.com/page2">Slide 2</a></h2>
</div>
</div>
<div class="accordion-slide">
<img decoding="async" src="https://yoursite.com/wp-content/uploads/2025/02/image3.webp" alt="Slide 3">
<div class="slide-content">
<h2 class="slide-title"><a href="https://yoursite.com/page3">Slide 3</a></h2>
</div>
</div>
<div class="accordion-slide">
<img decoding="async" src="https://yoursite.com/wp-content/uploads/2025/02/image4.webp" alt="Slide 4">
<div class="slide-content">
<h2 class="slide-title"><a href="https://yoursite.com/page4">Slide 4</a></h2>
</div>
</div>
</div>
Installation Steps
Installing the accordion slider is straightforward:
- Open your Elementor page builder
- Add a new HTML widget to your desired location
- Copy the entire code provided above
- Paste it into the HTML widget
- Replace the image URLs with paths to your own images
- Update the link URLs and titles for each slide
- Save your changes and preview
Customization Options
The slider is highly customizable to match your website’s design. You can easily modify:
- Overall appearance by adjusting image heights
- Overlay colors and text styles
- Number of slides by adding or removing accordion-slide blocks
- Hover effects by modifying flex values and transition timing
Responsive Design
The slider automatically adapts to different screen sizes:
- Desktop (above 1024px): Full-width horizontal accordion
- Tablet (768px-1024px): Horizontal layout with reduced height
- Mobile (below 768px): Vertical accordion with touch-friendly dimensions
Troubleshooting
If you encounter any issues:
- Verify all image URLs are correct
- Ensure the HTML widget is properly saved
- Try clearing your browser cache
- Check for potential theme conflicts with the styles
This accordion slider offers a professional and engaging way to showcase your images without requiring any plugins.
Simply copy, paste, and customize to match your website’s needs!
