├── README.md
├── images
├── modified.jpeg
└── normal.jpeg
├── index.html
├── modified.jpeg
├── normal.jpeg
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Image-Comparison-Slider
2 |
3 |
4 |
5 | https://user-images.githubusercontent.com/42389395/177753277-a2a808f8-0394-4f10-82ec-18c6ee77a656.mov
6 |
7 |
--------------------------------------------------------------------------------
/images/modified.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Patalin/Image-Comparison-Slider/b899bcfa8aa3e79791f7baef0c49437de781a935/images/modified.jpeg
--------------------------------------------------------------------------------
/images/normal.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Patalin/Image-Comparison-Slider/b899bcfa8aa3e79791f7baef0c49437de781a935/images/normal.jpeg
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Image Comparison Slider
6 |
7 |
8 |
9 |
21 |
22 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/modified.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Patalin/Image-Comparison-Slider/b899bcfa8aa3e79791f7baef0c49437de781a935/modified.jpeg
--------------------------------------------------------------------------------
/normal.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Patalin/Image-Comparison-Slider/b899bcfa8aa3e79791f7baef0c49437de781a935/normal.jpeg
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 | html,body{
7 | display: grid;
8 | height: 100%;
9 | place-items: center;
10 | background: #f2eee3;
11 | }
12 | .wrapper{
13 | position: relative;
14 | height: 500px;
15 | width: 750px;
16 | overflow: hidden;
17 | background: #fff;
18 | border: 7px solid #fff;
19 | box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
20 | }
21 | .wrapper .images{
22 | height: 100%;
23 | width: 100%;
24 | display: flex;
25 | }
26 | .wrapper .images .img-1{
27 | height: 100%;
28 | width: 100%;
29 | background: url("images/normal.jpeg") no-repeat;
30 |
31 | }
32 | .wrapper .images .img-2{
33 | position: absolute;
34 | height: 100%;
35 | width: 50%;
36 | background: url("images/modified.jpeg") no-repeat;
37 | }
38 | .wrapper .slider{
39 | position: absolute;
40 | top: 0;
41 | width: 100%;
42 | z-index: 99;
43 | }
44 | .wrapper .slider input{
45 | width: 100%;
46 | outline: none;
47 | background: none;
48 | -webkit-appearance: none;
49 | }
50 | .slider input::-webkit-slider-thumb{
51 | height: 486px;
52 | width: 3px;
53 | background: none;
54 | -webkit-appearance: none;
55 | cursor: col-resize;
56 | }
57 | .slider .drag-line{
58 | width: 3px;
59 | height: 486px;
60 | position: absolute;
61 | left: 49.85%;
62 | pointer-events: none;
63 | }
64 | .slider .drag-line::before,
65 | .slider .drag-line::after{
66 | position: absolute;
67 | content: "";
68 | width: 100%;
69 | height: 222px;
70 | background: #fff;
71 | }
72 | .slider .drag-line::before{
73 | top: 0;
74 | }
75 | .slider .drag-line::after{
76 | bottom: 0;
77 | }
78 | .slider .drag-line span{
79 | height: 42px;
80 | width: 42px;
81 | border: 3px solid #fff;
82 | position: absolute;
83 | top: 50%;
84 | left: 50%;
85 | border-radius: 50%;
86 | transform: translate(-50%, -50%);
87 | }
88 | .slider .drag-line span::before,
89 | .slider .drag-line span::after{
90 | position: absolute;
91 | content: "";
92 | top: 50%;
93 | border: 10px solid transparent;
94 | border-bottom-width: 0px;
95 | border-right-width: 0px;
96 | transform: translate(-50%, -50%) rotate(45deg);
97 | }
98 | .slider .drag-line span::before{
99 | left: 40%;
100 | border-left-color: #fff;
101 | }
102 | .slider .drag-line span::after{
103 | left: 60%;
104 | border-top-color: #fff;
105 | }
106 |
--------------------------------------------------------------------------------