Description
Key Features
- True 3D Perspective
CSStransform: translateZ()
androtateY()
create realistic depth on hover. - Hover‑to‑Expand & Click‑to‑Open
Images grow and reveal caption + “Read More” button; click again to close. - Responsive Centering
Dynamic container padding ensures cards are always centered on desktop; horizontal scroll on mobile. - Touch‑Swipe Support
Smooth drag‑to‑scroll on touch devices, with auto‑centering on open images. - Graceful Fallback
Horizontal overflow + scroll behavior on screens ≤ 820 px; minimized 3D effects to avoid clipping. - Customizable Style Variables
Tweak transition timing, shadows and colors via CSS custom properties. - No Dependencies
Pure ES6 JavaScript + semantic HTML + CSS—no frameworks or polyfills required.
Technical Specifications
- Dependencies: None
- Files:
index.html
– gallery markup and eight demo image slotsstyles.css
– 3D styles, responsive breakpoints, CSS variablesscript.js
– padding adjustment, hover/click handlers, touch navigation
- File Size: ~8 KB CSS + ~12 KB JS (minified)
- Browser Support: Modern ES6 browsers; mobile & desktop; no extra libraries
- Accessibility: ARIA‑friendly buttons, keyboard dismiss on outside click
What You Get
- index.html – fully annotated example
- styles.css – customizable CSS
- script.js – vanilla‑JS interactivity
- Demo Image Slots – eight sample
<div class="img">
placeholders
Use Cases
- E‑commerce Catalogs: Showcase product shots with depth and detail.
- Photography Portfolios: Engage visitors with interactive image previews.
- Real Estate Listings: Present property photos in a dynamic, immersive carousel.
- Travel & Lifestyle Blogs: Highlight destination imagery with smooth 3D flair.
Ready to elevate your image gallery?
Add the Perspective 3D Interactive Image Gallery to your site today and turn every photo into a memorable experience.