CSS
- 2 ответа
- 0 вопросов
1
Вклад в тег
<div class="items">
<div class="item" data-image="path/to/image1.jpg"></div>
<div class="item" data-image="path/to/image2.jpg"></div>
<div class="item" data-image="path/to/image3.jpg"></div>
<div class="item" data-image="path/to/image4.jpg"></div>
</div>
<div class="image-container">
<img class="image" src="">
</div>
.items {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
}
.image-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: none;
}
.image-container .image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80%;
max-height: 80%;
}
const items = document.querySelectorAll('.item');
const imageContainer = document.querySelector('.image-container');
const image = document.querySelector('.image-container .image');
let currentImage = null;
items.forEach(item => {
item.addEventListener('mouseenter', () => {
const imageUrl = item.getAttribute('data-image');
image.setAttribute('src', imageUrl);
imageContainer.style.display = 'block';
currentImage = imageUrl;
});
});
items.forEach(item => {
item.addEventListener('mouseleave', () => {
if (currentImage === item.getAttribute('data-image')) {
imageContainer.style.display = 'none';
}
});
});
imageContainer.addEventListener('click', () => {
imageContainer.style.display = 'none';
});