Hugging Face's logo

Spaces:
John2121
/
DGCchat
Running

App Files Community
John2121 commited on
Commit
0f1dd9b
·
1 Parent(s): f3a2dba

feat: swiper focus scaling for image carousel (center image zooms, sides shrink)

Browse files
Files changed (1) hide show
  1. index.html +41 -14
index.html CHANGED
@@ -106,6 +106,26 @@
106
  letter-spacing: -0.02em;
107
  text-shadow: 0 4px 24px #000a, 0 1px 0 #4ade80;
108
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  </style>
110
  </head>
111
 
@@ -161,57 +181,64 @@
161
  <!-- S3 Image Cards -->
162
  <div class="swiper-slide flex justify-center">
163
  <div
164
- class="bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform hover:scale-105 hover:shadow-green-400/30">
165
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5360.jpg"
166
- alt="Portfolio Image 1" class="rounded-2xl w-full h-[420px] object-cover mb-2"
 
167
  loading="lazy" />
168
  </div>
169
  </div>
170
  <div class="swiper-slide flex justify-center">
171
  <div
172
- class="bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform hover:scale-105 hover:shadow-green-400/30">
173
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5381.jpg"
174
- alt="Portfolio Image 2" class="rounded-2xl w-full h-[420px] object-cover mb-2"
 
175
  loading="lazy" />
176
  </div>
177
  </div>
178
  <div class="swiper-slide flex justify-center">
179
  <div
180
- class="bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform hover:scale-105 hover:shadow-green-400/30">
181
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5386.jpg"
182
- alt="Portfolio Image 3" class="rounded-2xl w-full h-[420px] object-cover mb-2"
 
183
  loading="lazy" />
184
  </div>
185
  </div>
186
  <div class="swiper-slide flex justify-center">
187
  <div
188
- class="bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform hover:scale-105 hover:shadow-green-400/30">
189
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5388.jpg"
190
- alt="Portfolio Image 4" class="rounded-2xl w-full h-[420px] object-cover mb-2"
 
191
  loading="lazy" />
192
  </div>
193
  </div>
194
  <div class="swiper-slide flex justify-center">
195
  <div
196
- class="bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform hover:scale-105 hover:shadow-green-400/30">
197
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5398.jpg"
198
- alt="Portfolio Image 5" class="rounded-2xl w-full h-[420px] object-cover mb-2"
 
199
  loading="lazy" />
200
  </div>
201
  </div>
202
  <div class="swiper-slide flex justify-center">
203
  <div
204
- class="bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform hover:scale-105 hover:shadow-green-400/30">
205
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5402.jpg"
206
- alt="Portfolio Image 6" class="rounded-2xl w-full h-[420px] object-cover mb-2"
 
207
  loading="lazy" />
208
  </div>
209
  </div>
210
  <div class="swiper-slide flex justify-center">
211
  <div
212
- class="bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform hover:scale-105 hover:shadow-green-400/30">
213
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5403.jpg"
214
- alt="Portfolio Image 7" class="rounded-2xl w-full h-[420px] object-cover mb-2"
 
215
  loading="lazy" />
216
  </div>
217
  </div>
 
106
  letter-spacing: -0.02em;
107
  text-shadow: 0 4px 24px #000a, 0 1px 0 #4ade80;
108
  }
109
+
110
+ /* Swiper active/centered slide scaling */
111
+ .swiper-slide .portfolio-slide {
112
+ transform: scale(0.85);
113
+ opacity: 0.7;
114
+ transition: transform 0.35s cubic-bezier(.4, 2, .6, 1), opacity 0.35s;
115
+ }
116
+
117
+ .swiper-slide-active .portfolio-slide {
118
+ transform: scale(1.08);
119
+ opacity: 1;
120
+ z-index: 2;
121
+ box-shadow: 0 24px 60px -10px #4ade80cc, 0 2px 16px #000a;
122
+ }
123
+
124
+ .swiper-slide-next .portfolio-slide,
125
+ .swiper-slide-prev .portfolio-slide {
126
+ transform: scale(0.95);
127
+ opacity: 0.85;
128
+ }
129
  </style>
130
  </head>
131
 
 
181
  <!-- S3 Image Cards -->
182
  <div class="swiper-slide flex justify-center">
183
  <div
184
+ class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
185
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5360.jpg"
186
+ alt="Portfolio Image 1"
187
+ class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
188
  loading="lazy" />
189
  </div>
190
  </div>
191
  <div class="swiper-slide flex justify-center">
192
  <div
193
+ class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
194
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5381.jpg"
195
+ alt="Portfolio Image 2"
196
+ class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
197
  loading="lazy" />
198
  </div>
199
  </div>
200
  <div class="swiper-slide flex justify-center">
201
  <div
202
+ class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
203
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5386.jpg"
204
+ alt="Portfolio Image 3"
205
+ class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
206
  loading="lazy" />
207
  </div>
208
  </div>
209
  <div class="swiper-slide flex justify-center">
210
  <div
211
+ class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
212
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5388.jpg"
213
+ alt="Portfolio Image 4"
214
+ class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
215
  loading="lazy" />
216
  </div>
217
  </div>
218
  <div class="swiper-slide flex justify-center">
219
  <div
220
+ class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
221
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5398.jpg"
222
+ alt="Portfolio Image 5"
223
+ class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
224
  loading="lazy" />
225
  </div>
226
  </div>
227
  <div class="swiper-slide flex justify-center">
228
  <div
229
+ class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
230
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5402.jpg"
231
+ alt="Portfolio Image 6"
232
+ class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
233
  loading="lazy" />
234
  </div>
235
  </div>
236
  <div class="swiper-slide flex justify-center">
237
  <div
238
+ class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
239
  <img src="https://buckrubtaxidermy.s3.amazonaws.com/darktable_exported/-taxidermy-studioinput_imagesFiles2025-10-04_09-05-55IMG_5403.jpg"
240
+ alt="Portfolio Image 7"
241
+ class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
242
  loading="lazy" />
243
  </div>
244
  </div>