HTML CSS изображение растет

Я хочу добавить 6 изображений в форму HTML. Я хотел бы 3 в одном ряду и другие 3 в следующем ряду. пользователь наводит курсор на любое из изображений, оно должно увеличиваться, но не должно нарушать положение другого изображения 5 Я также хотел бы, чтобы изображение увеличивалось, когда курсор находится на любом из изображений. Кроме того, положение остальных 5 изображений не должно меняться при увеличении одного из изображений.

Кто-нибудь знает, как это сделать только с помощью HTML и CSS?

.grow { переход: все .2s облегчение входа-выхода; } .grow:hover { преобразование: масштаб (1.1); }

Siraj Alam 16.12.2020 06:39
codepen.io/nxworld/pen/ZYNOBZ
Siraj Alam 16.12.2020 06:42

Пожалуйста, покажите, что вы пробовали. Совершите тур и узнайте Как спросить

ppwater 16.12.2020 06:42
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
3
629
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вот решение. Я использовал CSS Grid, чтобы сделать 3 изображения подряд и еще 3 для следующего ряда. Однако вам не обязательно использовать это.

Трюк, который я использовал, чтобы увеличить изображение, был scale();.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.image-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0.5rem;
}
img:hover {
  transform: scale(1.2);
}
<div class = "wrapper">
  <div class = "image-container">
    <img src = "https://placeimg.com/200/200/1" alt = "1" />
    <img src = "https://placeimg.com/200/200/2" alt = "2" />
    <img src = "https://placeimg.com/200/200/3" alt = "3" />
    <img src = "https://placeimg.com/200/200/4" alt = "4" />
    <img src = "https://placeimg.com/200/200/5" alt = "5" />
    <img src = "https://placeimg.com/200/200/6" alt = "6" />
  </div>
</div>

Я сделал вам решение, используя сетку javascript и css.

window.onload = function () {
    let img_show = document.querySelectorAll(".container_img");

    img_show.forEach(function (img_show_current) {
        img_show_current.onclick = function () {
            this.classList.toggle("img_show");
        };
    });
};
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
    position: relative;
}

.container_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.5s;
}

.container_img img:hover {
    transform: scale(1.1);
}

.container_img.img_show {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
<div class = "container">
    <div class = "container_img">
        <img src = "https://w-dog.ru/wallpapers/10/7/477636637359519.jpg" />
    </div>
    <div class = "container_img">
        <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcajj6p3VxDPOtGGNOd_7BwzcpO36o6rW34Q&usqp=CAU" />
    </div>
    <div class = "container_img">
        <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpAlH_q4oDlCu94hdmbMb9cmIRzpA-jsW_CQ&usqp=CAU" />
    </div>
    <div class = "container_img">
        <img src = "https://static9.depositphotos.com/1594308/1110/i/600/depositphotos_11107478-stock-photo-fantasy.jpg" />
    </div>
    <div class = "container_img">
        <img src = "https://klv-oboi.kz/img/gallery/1/thumbs/thumb_l_11350.jpg" />
    </div>
    <div class = "container_img">
        <img src = "https://klike.net/uploads/posts/2019-01/1547367999_1.jpg" />
    </div>
</div>

Другие вопросы по теме