Мобильная версияКод: Выделить всё
Minimal Fullscreen Hover Example
body {
background: #222;
margin: 0;
min-height: 100vh;
}
.gallery {
display: flex;
gap: 2rem;
padding: 2rem;
}
.img-ctr {
width: 200px;
cursor: pointer;
position: relative;
}
.img-ctr img {
width: 100%;
display: block;
border-radius: 8px;
}
#overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
z-index: 10;
pointer-events: none;
}
#overlay.show {
opacity: 1;
visibility: visible;
}
#previewOverlay {
position: fixed;
inset: 0;
background: no-repeat center center;
background-size: contain;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
z-index: 20;
pointer-events: none;
}
#previewOverlay.show {
opacity: 1;
visibility: visible;
}
#caption-box {
position: absolute;
background: #333;
color: #fff;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
z-index: 30;
min-width: 180px;
}
#caption-box.visible {
opacity: 1;
visibility: visible;
}
[img]https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400[/img]
Forest
Misty forest landscape
[img]https://images.unsplash.com/photo-1465101046530-73398c7f28ca?w=400[/img]
Mountains
Snowy mountain peaks
const overlay = document.getElementById('overlay');
const preview = document.getElementById('previewOverlay');
const caption = document.getElementById('caption-box');
document.querySelectorAll('.img-ctr').forEach(card => {
card.addEventListener('mouseenter', () => {
overlay.classList.add('show');
const src = card.querySelector('img').src;
preview.style.background = `url('${src}') center/contain no-repeat`;
preview.classList.add('show');
// Update caption
caption.querySelector('h3').textContent = card.querySelector('h3').textContent;
caption.querySelector('p').textContent = card.querySelector('p').textContent;
// Position caption box after DOM updates
setTimeout(() => {
const previewRect = preview.getBoundingClientRect();
const captionHeight = caption.offsetHeight;
const top = previewRect.top + window.scrollY + previewRect.height / 2 - captionHeight / 2;
const left = previewRect.right + 20;
const maxLeft = window.innerWidth - caption.offsetWidth - 20;
caption.style.top = `${top}px`;
caption.style.left = `${Math.min(left, maxLeft)}px`;
caption.classList.add('visible');
}, 30);
});
card.addEventListener('mouseleave', () => {
overlay.classList.remove('show');
preview.classList.remove('show');
caption.classList.remove('visible');
caption.style.top = '';
caption.style.left = '';
});
});
note : код выше был возвращенным при использовании интегрированного инструмента AI Copilot на VSCode. Фактический код довольно грязный, к сожалению, некоторые вещи скрыты в файле style.css, я стараюсь изо всех сил попытаться анализировать то, что работает хорошо! />
[*] Когда мышь парят на поступке на данный момент, и это все наносит на первую очередь. Экран:
[*] . 20px смещение (невероятно несовместимо):
, когда смазается, а затем и наносит фон, и наносятся на фоне. out. < /p>
< /li>
< /ul>
Реально я бы предпочел, если бы изображения не создали полноэкранное наложение и вместо этого расширяются при парящих, так что это более плавный пользовательский опыт. Если это невозможно использовать объекты карт, я более чем готов использовать что -то другое, что имеет больше смысла в этом сценарии. В худшем случае я могу просто сделать так, чтобы нажатие на изображение привело вас на отдельную вкладку с полным изображением и заголовком/подписью с ним.
Подробнее здесь: https://stackoverflow.com/questions/796 ... ally-jarri
