Ответы пользователя по тегу CSS
  • Как сделать появление изображения при наведении на объекты?

    TheBeJIIHiu
    @TheBeJIIHiu
    Просто обычный кодер?
    <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';
    });
    Ответ написан
    1 комментарий
  • Как программно уменьшить область просмотра в браузере?

    TheBeJIIHiu
    @TheBeJIIHiu
    Просто обычный кодер?
    Возможно, вы сможете использовать transform: scale(.9)этот bodyэлемент. Хотя в будущем я бы рекомендовал создать адаптивный дизайн, используя вместо этого медиа-запросы.

    Это было -moz-transform: scale(.9)бы специально для Firefox.

    Источник Stackover Flow
    Ответ написан