@localguide added htmlContent (English):
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8 />
<meta name=viewport content=width=device-width, initial-scale=1 />
<title>Image Effects Gallery – Demo</title>
<style>
:root
--bg:#0b0d10;--panel:#11151a;--ink:#e9eef5;--muted:#9fb0c3;--brand:#6ee7ff;--brand2:#a78bfa;
--radius:18px;--shadow:0 10px 30px rgba(0,0,0,.35)
*box-sizing:border-box
html,bodyheight:100%
body
margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
color:var(--ink);background:linear-gradient(180deg,#0b0d10 0%, #0e1217 60%, #0b0d10 100%);
acolor:var(--brand)
header
position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);
background:rgba(11,13,16,.55);border-bottom:1px solid rgba(255,255,255,.06)
.wrapmax-width:1200px;margin:auto;padding:22px
.title
display:flex;align-items:center;gap:16px;flex-wrap:wrap
.title h1margin:0;font-weight:800;letter-spacing:.2px;font-size:clamp(20px,3vw,34px)
navmargin-left:auto;display:flex;gap:14px;flex-wrap:wrap
nav afont-size:14px;text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:999px;background:#0f141a;border:1px solid rgba(255,255,255,.06)
nav a:hovercolor:var(--ink);border-color:rgba(255,255,255,.18)
.heroposition:relative;overflow:hidden
.hero .wrapdisplay:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center
.chipdisplay:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:var(--muted);font-size:12px
.hero h2margin:10px 0 6px;font-size:clamp(28px,6vw,54px);line-height:1.02
.hero pcolor:var(--muted);max-width:60ch
.hero .stackposition:relative;height:320px
.hero .stack imgposition:absolute;inset:auto;max-width:60%;border-radius:14px;box-shadow:var(--shadow);transform-origin:center;transition:transform .6s ease,opacity .6s ease
.hero .stack img:nth-child(1)left:0;top:20px;transform:rotate(-6deg)
.hero .stack img:nth-child(2)left:120px;top:40px;transform:rotate(5deg)
.hero .stack img:nth-child(3)left:240px;top:0;transform:rotate(-2deg)
.hero .stack:hover imgtransform:translateY(-6px) rotate(0deg)
sectionscroll-margin-top:90px
.sectionpadding:42px 0;border-top:1px solid rgba(255,255,255,.06)
.section h3margin:0 0 8px;font-size:clamp(20px,3vw,28px)
.section p.leadcolor:var(--muted);margin:0 0 22px
/* 1) Hover Zoom + Caption */
.griddisplay:grid;grid-template-columns:repeat(12,1fr);gap:16px
.cardgrid-column:span 4;background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);overflow:hidden;position:relative
.card imgwidth:100%;height:260px;object-fit:cover;display:block;transition:transform .5s ease, filter .5s ease
.card .capposition:absolute;inset:auto 0 0; padding:12px 14px;background:linear-gradient(180deg,transparent, rgba(0,0,0,.75)); color:#fff; font-size:14px;opacity:.0; transform:translateY(8px); transition:all .4s ease
.card:hover imgtransform:scale(1.06)
.card:hover .capopacity:1;transform:none
/* 2) CSS Filters Showcase */
.filtersdisplay:grid;grid-template-columns:repeat(7,1fr);gap:12px
.fBoxborder-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.06);position:relative;background:var(--panel)
.fBox imgwidth:100%;height:180px;object-fit:cover;display:block;filter:var(--f, none);transition:filter .35s ease, transform .35s ease
.fBox:hover imgtransform:scale(1.03);filter:none
.fBox smallposition:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:999px;color:#e6eef9
/* 3) Masonry (CSS columns) */
.masonrycolumn-count:4;column-gap:16px
.mItembreak-inside:avoid;border-radius:16px;overflow:hidden;margin:0 0 16px;border:1px solid rgba(255,255,255,.06);background:var(--panel)
.mItem imgwidth:100%;height:auto;display:block
/* 4) Parallax Banner */
.parallaxheight:42vh;min-height:320px;border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#000;position:relative
.parallax::beforecontent:;position:absolute;inset:0;background:url('https://waivio.nyc3.digitaloceanspaces.com/adcfd48796b4ed01be18c5cc6e8bf9b8e9a466fbd1ec7dcadf238c58318fbd01') center / cover fixed; filter:contrast(1.05) saturate(1.1)
.parallax h4position:absolute;inset:auto 0 16px; text-align:center;margin:0;font-size:clamp(20px,3.2vw,30px);background:linear-gradient(180deg,transparent,rgba(0,0,0,.7)); padding:28px 10px
/* 5) Carousel */
.carouselposition:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:var(--panel)
.carousel-trackdisplay:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1)
.carousel imgwidth:100%;height:420px;object-fit:cover;display:block
.cBtnposition:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2); color:#fff;border-radius:12px;padding:10px 14px;cursor:pointer
.cPrevleft:10px.cNextright:10px
.dotsdisplay:flex;justify-content:center;gap:8px;padding:10px
.dotwidth:8px;height:8px;border-radius:999px;background:#3a4654;border:1px solid rgba(255,255,255,.15);transition:transform .2s
.dot.activetransform:scale(1.3);background:linear-gradient(135deg,var(--brand),var(--brand2))
/* 6) Tilt / Mouse Parallax */
.tiltdisplay:grid;grid-template-columns:repeat(3,1fr);gap:16px
.tilt .cellperspective:600px
.tilt .innertransform-style:preserve-3d;transition:transform .08s ease;will-change:transform;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:var(--panel)
.tilt imgwidth:100%;height:260px;object-fit:cover;display:block
/* 7) Lazy-load with blur-up */
.lazy-griddisplay:grid;grid-template-columns:repeat(6,1fr);gap:12px
.lazyposition:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:var(--panel)
.lazy imgwidth:100%;height:160px;object-fit:cover;display:block;filter:blur(18px);transform:scale(1.08);transition:filter .5s ease, transform .5s ease
.lazy.loaded imgfilter:blur(0);transform:none
/* 8) Lightbox */
.lightboxposition:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:100
.lightbox.opendisplay:flex
.lightbox imgmax-width:min(92vw,1200px);max-height:80vh;border-radius:16px;box-shadow:var(--shadow)
.lightbox .closeposition:absolute;top:14px;right:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;padding:8px 12px;cursor:pointer
footercolor:var(--muted);text-align:center;padding:40px 0
/* Responsive */
@media (max-width:1000px)
.hero .wrapgrid-template-columns:1fr
.cardgrid-column:span 6
.filtersgrid-template-columns:repeat(4,1fr)
.masonrycolumn-count:3
.tiltgrid-template-columns:repeat(2,1fr)
.lazy-gridgrid-template-columns:repeat(4,1fr)
@media (max-width:720px)
navdisplay:none
.cardgrid-column:span 12
.filtersgrid-template-columns:repeat(2,1fr)
.masonrycolumn-count:2
.tiltgrid-template-columns:1fr
.lazy-gridgrid-template-columns:repeat(2,1fr)
.carousel imgheight:300px
</style>
</head>
<body>
<header>
<div class=wrap title>
<h1>Image Effects Gallery</h1>
<nav aria-label=Sections>
<a href=#hover>Hover Zoom</a>
<a href=#filters>CSS Filters</a>
<a href=#masonry>Masonry</a>
<a href=#parallax>Parallax</a>
<a href=#carousel>Carousel</a>
<a href=#tilt>Tilt</a>
<a href=#lazy>Lazy-load</a>
<a href=#lightbox-section>Lightbox</a>
</nav>
</div>
</header>
<section class=hero>
<div class=wrap>
<div>
<span class=chip>HTML • CSS • JS</span>
<h2>Showcasing visual effects for image galleries</h2>
<p>Below are practical patterns you can reuse in your projects. Each section briefly explains the idea and then demonstrates it using the provided images. Click any image to view it in a full‑screen lightbox.</p>
</div>
<div class=stack aria-hidden=true>
<img src=https://waivio.nyc3.digitaloceanspaces.com/9768387be2797fe6f5f5f283940c1eeff36788b27220ece58cc5588f6fabb3ca alt=Stack sample 1>
<img src=https://waivio.nyc3.digitaloceanspaces.com/436be9350bccc5dfd437005dba32ad9bc6f5e015ab9f7a5a45d2d91d574da573 alt=Stack sample 2>
<img src=https://waivio.nyc3.digitaloceanspaces.com/adcfd48796b4ed01be18c5cc6e8bf9b8e9a466fbd1ec7dcadf238c58318fbd01 alt=Stack sample 3>
</div>
</div>
</section>
<section id=hover class=section>
<div class=wrap>
<h3>1) Hover Zoom + Caption Reveal</h3>
<p class=lead>A simple interaction: scale the image slightly on hover and fade in a bottom caption using a gradient overlay. Great for card-based galleries.</p>
<div class=grid id=hoverGrid></div>
</div>
</section>
<section id=filters class=section>
<div class=wrap>
<h3>2) CSS Filters (grayscale, sepia, blur, etc.)</h3>
<p class=lead>Filter thumbnails for a stylized look. We apply filters by default and remove them on hover to draw attention.</p>
<div class=filters id=filterGrid></div>
</div>
</section>
<section id=masonry class=section>
<div class=wrap>
<h3>3) Masonry Layout with CSS Columns</h3>
<p class=lead>Create a “Pinterest‑style” waterfall using <code>column-count</code>. It’s lightweight and works well for mixed image heights.</p>
<div class=masonry id=masonryWrap></div>
</div>
</section>
<section id=parallax class=section>
<div class=wrap>
<h3>4) Parallax Banner (background‑attachment: fixed)</h3>
<p class=lead>A classic effect that gives depth by fixing the background while content scrolls. Works best on desktop.</p>
<div class=parallax><h4>Parallax banner using one of the gallery images</h4></div>
</div>
</section>
<section id=carousel class=section>
<div class=wrap>
<h3>5) Minimal Carousel (Vanilla JS)</h3>
<p class=lead>A lightweight slider with previous/next buttons and pagination dots. Resize‑aware and touch‑friendly.</p>
<div class=carousel aria-roledescription=carousel>
<div class=carousel-track id=track></div>
<button class=cBtn cPrev aria-label=Previous id=prev>◀</button>
<button class=cBtn cNext aria-label=Next id=next>▶</button>
</div>
<div class=dots id=dots aria-label=Slide pagination></div>
</div>
</section>
<section id=tilt class=section>
<div class=wrap>
<h3>6) Subtle Tilt (Mouse Parallax)</h3>
<p class=lead>Adds a small 3D tilt that follows the cursor. Keep angles tiny for a tasteful effect and to avoid motion sickness.</p>
<div class=tilt id=tiltWrap></div>
</div>
</section>
<section id=lazy class=section>
<div class=wrap>
<h3>7) Lazy‑load with Blur‑up</h3>
<p class=lead>Images load as they enter the viewport. We start with a blurred state and transition to sharp when loaded. Good for performance and perceived speed.</p>
<div class=lazy-grid id=lazyGrid></div>
</div>
</section>
<section id=lightbox-section class=section>
<div class=wrap>
<h3>8) Click‑to‑Zoom Lightbox</h3>
<p class=lead>Click any image in this page to open it here in a full‑screen lightbox. Keyboard: <kbd>Esc</kbd> to close, <kbd>←/→</kbd> to navigate.</p>
</div>
</section>
<div class=lightbox id=lightboxModal aria-modal=true role=dialog aria-label=Image viewer>
<button class=close id=closeLb aria-label=Close>✕ Close</button>
<img id=lbImg alt=Expanded view />
</div>
<footer>
Built with HTML, CSS, and vanilla JS — no dependencies.
</footer>
<script>
// ===== Data =====
const IMAGES = [
src:'https://waivio.nyc3.digitaloceanspaces.com/9768387be2797fe6f5f5f283940c1eeff36788b27220ece58cc5588f6fabb3ca', alt:'Gallery 1',
src:'https://waivio.nyc3.digitaloceanspaces.com/436be9350bccc5dfd437005dba32ad9bc6f5e015ab9f7a5a45d2d91d574da573', alt:'Gallery 2',
src:'https://waivio.nyc3.digitaloceanspaces.com/adcfd48796b4ed01be18c5cc6e8bf9b8e9a466fbd1ec7dcadf238c58318fbd01', alt:'Gallery 3',
src:'https://waivio.nyc3.digitaloceanspaces.com/dd72b5140384eb808fd68d05823a2309c41bef1ee2cbf39d4c308cc4f1f7757f', alt:'Gallery 4',
src:'https://waivio.nyc3.digitaloceanspaces.com/bb56fc3211726906b689019358ba5bbc03699d57782c010cce94c4c945c87b72', alt:'Gallery 5',
src:'https://waivio.nyc3.digitaloceanspaces.com/a2e0d499c3b88432544764602742688c825b99cf109a1f1104677f05245a4f35', alt:'Gallery 6',
src:'https://waivio.nyc3.digitaloceanspaces.com/bface45647c141be27d422c96f2e3764a041c617290ffa539401be320c42569a', alt:'Gallery 7',
];
// Utility: create element
const el = (tag, props=, children=[])=>
const n = document.createElement(tag);
Object.assign(n, props);
children.forEach(c=> n.append(c));
return n;
;
// ===== 1) Hover Zoom + Caption =====
const hoverGrid = document.getElementById('hoverGrid');
IMAGES.slice(0,6).forEach((img, i)=>
const card = el('figure', className:'card');
const image = el('img', src: img.src, alt: img.alt);
const cap = el('figcaption', className:'cap', innerHTML:`Sample caption #$i+1`);
card.append(image, cap);
card.addEventListener('click', ()=> openLightbox(img.src));
hoverGrid.append(card);
);
// ===== 2) CSS Filters Showcase =====
const filterGrid = document.getElementById('filterGrid');
const filters = [
['grayscale(100%)','grayscale'],
['sepia(80%)','sepia'],
['contrast(1.3)','contrast+'],
['saturate(1.5)','saturate+'],
['hue-rotate(20deg)','hue-rotate'],
['brightness(1.2)','bright+'],
['blur(1px) contrast(1.1)','blur+contrast']
];
IMAGES.forEach((img, i)=>
const f = filters[i % filters.length];
const box = el('div', className:'fBox', style:`--f:$f[0]`);
const image = el('img', src: img.src, alt: img.alt);
const label = el('small', innerText: f[1]);
box.append(image, label);
box.addEventListener('click', ()=> openLightbox(img.src));
filterGrid.append(box);
);
// ===== 3) Masonry Layout =====
const masonryWrap = document.getElementById('masonryWrap');
for(let i=0;i<8;i++)
const m = el('div', className:'mItem');
const img = IMAGES[i % IMAGES.length];
const image = el('img', src: img.src, alt: img.alt + ' (masonry)');
m.append(image);
m.addEventListener('click', ()=> openLightbox(img.src));
masonryWrap.append(m);
// ===== 5) Carousel =====
const track = document.getElementById('track');
const dotsWrap = document.getElementById('dots');
let idx = 0;
function buildCarousel()
track.innerHTML=''; dotsWrap.innerHTML='';
IMAGES.forEach((img,i)=>
const frame = el('div', style:'min-width:100%');
frame.append(el('img',src:img.src,alt:img.alt));
frame.addEventListener('click', ()=> openLightbox(img.src));
track.append(frame);
const dot = el('div', className:'dot' + (i===idx?' active':''));
dot.addEventListener('click', ()=> go(i));
dotsWrap.append(dot);
);
resizeCarousel();
function go(i) idx = (i+IMAGES.length)%IMAGES.length; update();
function next() go(idx+1);
function prev() go(idx-1);
function update()
const w = document.querySelector('.carousel').clientWidth;
track.style.transform = `translateX($-idx*wpx)`;
[...dotsWrap.children].forEach((d,i)=> d.classList.toggle('active', i===idx));
function resizeCarousel() update();
document.getElementById('next').addEventListener('click', next);
document.getElementById('prev').addEventListener('click', prev);
window.addEventListener('resize', resizeCarousel);
let startX=null; track.addEventListener('touchstart',e=> startX=e.touches[0].clientX);
track.addEventListener('touchend',e=> if(startX==null) return; const dx=e.changedTouches[0].clientX-startX; if(Math.abs(dx)>40) dx<0?next():prev(); startX=null; );
buildCarousel();
// ===== 6) Tilt / Mouse Parallax =====
const tiltWrap = document.getElementById('tiltWrap');
IMAGES.slice(0,6).forEach(img=>
const cell = el('div', className:'cell');
const inner = el('div', className:'inner');
const image = el('img', src: img.src, alt: img.alt);
inner.append(image); cell.append(inner); tiltWrap.append(cell);
cell.addEventListener('mousemove', (e)=>
const r = cell.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width; // 0..1
const y = (e.clientY - r.top) / r.height; // 0..1
const rx = (y - .5) * -12; // tilt up/down
const ry = (x - .5) * 12; // tilt left/right
inner.style.transform = `rotateX($rxdeg) rotateY($rydeg) translateZ(24px) scale(1.03)`;
);
cell.addEventListener('mouseleave', ()=> inner.style.transform='');
cell.addEventListener('click', ()=> openLightbox(img.src));
);
// ===== 7) Lazy-load with blur-up =====
const lazyGrid = document.getElementById('lazyGrid');
for(let i=0;i<12;i++)
const box = el('div',className:'lazy');
const img = IMAGES[i % IMAGES.length];
const image = el('img',alt:img.alt, loading:'lazy'); image.setAttribute('data-src', img.src);
box.append(image); lazyGrid.append(box);
box.addEventListener('click', ()=> openLightbox(img.src));
const io = 'IntersectionObserver' in window ? new IntersectionObserver((entries,obs)=>
entries.forEach(en=>
if(en.isIntersecting)
const img = en.target.querySelector('img');
if(img && !img.src) img.src = img.dataset.src; img.addEventListener('load', ()=> en.target.classList.add('loaded'), once:true);
obs.unobserve(en.target);
)
,rootMargin:'120px') : null;
document.querySelectorAll('.lazy').forEach(b=> io? io.observe(b) : (b.querySelector('img').src = b.querySelector('img').dataset.src));
// ===== 8) Lightbox =====
const lb = document.getElementById('lightboxModal');
const lbImg = document.getElementById('lbImg');
const closeLb = document.getElementById('closeLb');
let currentSrc = null;
function openLightbox(src) lbImg.src = src; currentSrc = src; lb.classList.add('open');
function closeLightbox() lb.classList.remove('open'); lbImg.removeAttribute('src');
closeLb.addEventListener('click', closeLightbox);
lb.addEventListener('click', e=> if(e.target===lb) closeLightbox(); );
document.addEventListener('keydown', e=>
if(!lb.classList.contains('open')) return;
if(e.key==='Escape') closeLightbox();
if(e.key==='ArrowRight') nextInLightbox(1);
if(e.key==='ArrowLeft') nextInLightbox(-1);
);
function nextInLightbox(step)
const i = IMAGES.findIndex(i=> i.src===currentSrc);
const ni = (i + step + IMAGES.length) % IMAGES.length;
currentSrc = IMAGES[ni].src; lbImg.src = currentSrc;
</script>
</body>
</html>