Skip to content

Commit 8748879

Browse files
aayush105aayush105
authored
Merge pull request #743 from SiddarthaKarri/feature/image-comparison-slider
Add pure CSS image comparison slider with modern UI
2 parents 7ec02d6 + e9f83ee commit 8748879

File tree

6 files changed

+297
-0
lines changed

6 files changed

+297
-0
lines changed

‎Image Comparision Slider/README.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# Pure CSS Image Comparison Slider
2+
3+
A beautiful, interactive image comparison slider built with **pure CSS** using the `resize` property. No JavaScript required!
4+
5+
## 🎯 Features
6+
7+
- **100% Pure CSS** - No JavaScript whatsoever
8+
- **Draggable Interface** - Uses CSS `resize` property for true drag functionality
9+
- **Modern UI Design** - Beautiful gradient backgrounds and glassmorphism effects
10+
- **Fully Responsive** - Works perfectly on desktop, tablet, and mobile
11+
- **Accessibility Support** - Keyboard navigation and reduced motion support
12+
- **Cross-browser Compatible** - Including Safari workarounds
13+
14+
## 🔧 How It Works
15+
16+
The magic happens with these CSS techniques:
17+
18+
1. **CSS `resize` Property** - Makes the container horizontally resizable
19+
2. **CSS Custom Properties** - For dynamic positioning and theming
20+
3. **Filter Effects** - Uses `filter: grayscale(1)` to create the comparison effect
21+
4. **Clever Positioning** - Overlay technique to reveal/hide image portions
22+
23+
## 🎨 Visual Features
24+
25+
- **Elegant Drag Handle** - Circular handle with drag indicator
26+
- **Smooth Animations** - Hover effects and focus states
27+
- **Beautiful Labels** - Floating labels with gradient backgrounds
28+
- **Glow Effects** - Subtle shadows and glowing borders
29+
- **Modern Typography** - Inter font for clean, professional look
30+
31+
## 📱 Responsive Design
32+
33+
- **Desktop**: Full-featured experience with large drag handle
34+
- **Tablet**: Optimized spacing and touch-friendly interactions
35+
- **Mobile**: Compact design with adjusted proportions
36+
37+
## ♿ Accessibility
38+
39+
- **Keyboard Navigation** - Tab to focus, see automatic animation
40+
- **Screen Reader Support** - Proper ARIA labels and descriptions
41+
- **Reduced Motion** - Respects `prefers-reduced-motion` settings
42+
- **Focus Indicators** - Clear visual focus states
43+
44+
## 🚀 Usage
45+
46+
1. Open `index.html` in any modern browser
47+
2. **Drag** the blue line to compare images
48+
3. **Click/Tab** to focus for automatic demonstration
49+
4. Works on touch devices too!
50+
51+
## 🎯 Code Structure
52+
53+
```
54+
Image Comparision Slider/
55+
├── index.html # Main HTML file
56+
├── styles.css # Complete CSS styling
57+
├── ss_1.png # Screenshot 1
58+
├── ss_2.png # Screenshot 2
59+
└── README.md # This file
60+
```
61+
62+
## 🌟 Key CSS Techniques
63+
64+
- `resize: horizontal` for draggable functionality
65+
- CSS custom properties for theming
66+
- `backdrop-filter` for glassmorphism effects
67+
- `aspect-ratio` for responsive images
68+
- CSS Grid and Flexbox for layout
69+
70+
## 🎨 Customization
71+
72+
Easy to customize with CSS custom properties:
73+
74+
```css
75+
:root {
76+
--primary-color: #667eea;
77+
--splitter-color: #667eea;
78+
--splitter-size: 0.2rem;
79+
--expand: 1rem;
80+
}
81+
```
82+
83+
## 🔗 Demo
84+
85+
[View Live Demo](index.html)
86+
87+
---
88+
89+
**Built with ❤️ using pure CSS • No JavaScript required**

‎Image Comparision Slider/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Pure CSS Image Comparison Slider</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<h1>Pure CSS Image Comparison Slider</h1>
11+
12+
<div class="instructions">
13+
🎯 <strong>Drag the pink line</strong> to compare the colored vs grayscale versions<br>
14+
💡 <strong>Click to focus</strong> for automatic animation
15+
</div>
16+
17+
<figure>
18+
<p class="image-compare" role="img" tabindex="0" aria-label="When comparing the photos, it becomes noticable that the black-and-white image lacks color." aria-description="This image is actually a set of two images, and when the set is focused, the two contained images are alternated between.">
19+
<span>
20+
<img src="https://images.unsplash.com/photo-1574158622682-e40e69881006?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Random cat picture, with color taken away.">
21+
</span>
22+
<img src="https://images.unsplash.com/photo-1574158622682-e40e69881006?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Unaltered random cat picture.">
23+
</p>
24+
<figcaption>Comparing the black-and-white version of a photo with its colored counterpart.</figcaption>
25+
</figure>
26+
27+
<div class="instructions">
28+
✨ This uses the CSS <code>resize</code> property to create a draggable interface<br>
29+
🚫 <strong>Zero JavaScript</strong> - Pure CSS only!
30+
</div>
31+
</body>
32+
</html>

‎Image Comparision Slider/ss_1.png‎

253 KB
Loading

‎Image Comparision Slider/ss_2.png‎

221 KB
Loading

‎Image Comparision Slider/styles.css‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
.image-compare {
2+
--splitter-color: hotpink;
3+
--splitter-size: 0.125rem;
4+
--expand: 0.875rem;
5+
--handle-size: calc(var(--expand) + var(--splitter-size));
6+
position: relative;
7+
}
8+
9+
.image-compare span {
10+
display: block;
11+
position: absolute;
12+
top: 0;
13+
left: calc(-1 * var(--expand));
14+
bottom: calc(-1 * var(--expand));
15+
width: calc(var(--expand) + 50% + var(--splitter-size) / 2);
16+
max-width: calc(var(--expand) + 100%);
17+
min-width: var(--handle-size);
18+
padding-left: var(--expand);
19+
padding-bottom: var(--expand);
20+
background: linear-gradient(135deg, transparent 0, transparent 50%, var(--splitter-color) 50%, var(--splitter-color)) 100% 100% / var(--handle-size) var(--handle-size) no-repeat;
21+
resize: horizontal;
22+
overflow: hidden;
23+
}
24+
25+
.image-compare img {
26+
display: block;
27+
height: 100%;
28+
user-select: none;
29+
}
30+
31+
.image-compare>img {
32+
max-width: 100%;
33+
height: auto;
34+
}
35+
36+
.image-compare span::after {
37+
content: "";
38+
display: block;
39+
position: absolute;
40+
top: 0;
41+
right: 0;
42+
bottom: var(--expand);
43+
border-right: var(--splitter-size) solid var(--splitter-color);
44+
}
45+
46+
/* Safari Workaround */
47+
@supports (-webkit-hyphens: none) {
48+
49+
/* Safari */
50+
.image-compare span {
51+
width: var(--handle-size);
52+
}
53+
}
54+
55+
/* Accessibility Fallback #1 */
56+
@keyframes pingpong {
57+
58+
0%,
59+
100% {
60+
width: calc(var(--expand) + 50% + var(--splitter-size) / 2);
61+
}
62+
63+
75% {
64+
width: var(--handle-size);
65+
}
66+
67+
25% {
68+
width: calc(var(--expand) + 100%);
69+
}
70+
}
71+
72+
.image-compare:focus span {
73+
background-image: none;
74+
animation: pingpong 5s linear infinite;
75+
resize: none;
76+
}
77+
78+
/* Accessibility Fallback #2 */
79+
@keyframes fade {
80+
81+
0%,
82+
23%,
83+
77%,
84+
100% {
85+
opacity: 1;
86+
}
87+
88+
27%,
89+
73% {
90+
opacity: 0;
91+
}
92+
}
93+
94+
@media (prefers-reduced-motion: reduce) {
95+
.image-compare:focus span {
96+
width: calc(var(--expand) + 100%);
97+
animation-name: fade;
98+
}
99+
100+
.image-compare:focus span::after {
101+
display: none;
102+
}
103+
}
104+
105+
/* Base styles */
106+
*,
107+
::before,
108+
::after {
109+
box-sizing: border-box;
110+
}
111+
112+
:focus {
113+
outline: 1px dashed hotpink;
114+
outline-offset: 1px;
115+
}
116+
117+
html {
118+
font-family: sans-serif;
119+
line-height: 1.5;
120+
font-size: 100%;
121+
}
122+
123+
body {
124+
max-width: 24rem;
125+
margin: 1rem auto 6rem;
126+
background: #f0f0f0;
127+
}
128+
129+
figure {
130+
padding: 1rem;
131+
background-color: #ccc;
132+
}
133+
134+
figure,
135+
p {
136+
margin: 0 0 1rem;
137+
}
138+
139+
/* Image filter hack - use same image but make span version grayscale */
140+
span img {
141+
filter: grayscale(1);
142+
}
143+
144+
/* Additional styling for better presentation */
145+
figcaption {
146+
text-align: center;
147+
font-style: italic;
148+
color: #555;
149+
margin-top: 0.5rem;
150+
}
151+
152+
h1 {
153+
text-align: center;
154+
color: #333;
155+
margin-bottom: 2rem;
156+
font-size: 2rem;
157+
}
158+
159+
.instructions {
160+
text-align: center;
161+
margin: 2rem 0;
162+
padding: 1rem;
163+
background: #e9e9e9;
164+
border-radius: 8px;
165+
color: #666;
166+
}

‎README.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
6161
- [Horizontal image slider](#horizontal-image-slider)
6262
- [Image Gallery](#image-gallery)
6363
- [Image Hover Effect]()
64+
- [Image Comparison Slider](#image-comparison-slider)
6465
- [Infinite Carousel](#infinite-carousel)
6566
- [Info on Hover / Popover](#info-on-hover-popover)
6667
- [Jumping Ball](#jumping-ball)
@@ -338,6 +339,15 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
338339

339340
---
340341

342+
## <a id="image-comparison-slider"></a>Image Comparison Slider
343+
344+
[<img src="Image Comparision Slider/ss_1.png" height="230" title="Pure CSS Image Comparison Slider Demo 1">](Image%20Comparision%20Slider/index.html)
345+
[<img src="Image Comparision Slider/ss_2.png" height="230" title="Pure CSS Image Comparison Slider Demo 2">](Image%20Comparision%20Slider/index.html)
346+
347+
**[⬆ back to top](#quick-links)**
348+
349+
---
350+
341351
## <a id="interactive-image"></a>Interactive Image Gallery
342352

343353
[<img src="./images/interactive-image.png" height="230" title="Demo Image">]

0 commit comments

Comments
 (0)