Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create Image Accordion using HTML and CSS?
An image accordion is a popular web interface element that allows users to expand and collapse image sections for an interactive browsing experience. This technique creates a smooth, space-efficient way to display multiple images where only one section is fully visible at a time.
Syntax
.accordion-container {
display: flex;
}
.accordion-item {
flex: 1;
transition: all 0.3s ease;
cursor: pointer;
}
.accordion-item:hover {
flex: expanded-ratio;
}
What is an Accordion?
An accordion is a user interface component that organizes content into expandable sections. When applied to images, it creates an elegant way to showcase multiple photos in a limited space, with each section expanding on hover or click to reveal the full image.
Approach
To create an image accordion, we use CSS flexbox for layout control and transitions for smooth animations. Each image section starts with equal width (flex: 1) and expands when hovered. The key components include:
- A container element using
display: flex - Individual image sections with background images
- CSS transitions for smooth expansion effects
- Hover states to trigger the accordion behavior
Example: Basic Image Accordion
The following example creates a simple image accordion with two sections
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 20px;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.accordion-container {
display: flex;
height: 400px;
width: 100%;
max-width: 800px;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.accordion-section {
flex: 1;
background-size: cover;
background-position: center;
position: relative;
cursor: pointer;
transition: all 0.4s ease;
border-right: 2px solid #fff;
}
.accordion-section:last-child {
border-right: none;
}
.accordion-section:hover {
flex: 3;
}
.section-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
padding: 20px;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.section1 {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><rect width="400" height="300" fill="%234a90e2"/><text x="200" y="150" text-anchor="middle" fill="white" font-size="24" font-family="Arial">Mountain View</text></svg>');
}
.section2 {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><rect width="400" height="300" fill="%2350c878"/><text x="200" y="150" text-anchor="middle" fill="white" font-size="24" font-family="Arial">Ocean Waves</text></svg>');
}
.section3 {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300"><rect width="400" height="300" fill="%23f5a623"/><text x="200" y="150" text-anchor="middle" fill="white" font-size="24" font-family="Arial">Desert Sunset</text></svg>');
}
</style>
</head>
<body>
<div class="accordion-container">
<div class="accordion-section section1">
<div class="section-title">Mountain View</div>
</div>
<div class="accordion-section section2">
<div class="section-title">Ocean Waves</div>
</div>
<div class="accordion-section section3">
<div class="section-title">Desert Sunset</div>
</div>
</div>
</body>
</html>
Three image sections appear side by side with equal width. When you hover over any section, it smoothly expands to three times its original width while the others shrink, creating a smooth accordion effect. Each section displays a colored background with a title overlay.
Key Features
-
Flexbox Layout: Uses
display: flexfor responsive section arrangement -
Smooth Transitions: CSS
transitionproperty creates fluid animations -
Hover Effects: Sections expand on hover using
flexproperty changes -
Background Images:
background-size: coverensures proper image scaling - Overlay Text: Positioned absolutely for image captions
Conclusion
Creating an image accordion with HTML and CSS is an effective way to showcase multiple images in a compact, interactive format. The combination of flexbox and CSS transitions provides smooth animations that enhance user experience while maintaining responsive design.
817 Views
