Блог

Главная - Вопросы по программированию - Изображение меняет размер при наведении

Изображение меняет размер при наведении

#html #less

#HTML #Меньше

Вопрос:

У меня небольшая проблема с моей темой. Когда я навожу курсор на изображения, кажется, что средние изображения уменьшаются примерно на один пиксель.

Вот ссылка на сайт

И код

 #grid{
    display: flex;
    position: relative;
    flex-wrap: wrap;

    amp;.col-3 .single{
        width: 33.333333333333333333333333333333%;
        display: inline-flex;
    }
    a{
        display: inherit;
    }
    img{
        width: 100%;
        height: auto;
        transition: all .5s ease;
    }
    amp;:hover img{
        opacity: 0.5;
    }
    amp;:hover img:hover{
        opacity: 1;
    }
}

Как я могу это исправить?

Комментарии:

1. Это чистый CSS или МЕНЬШЕ или что-то в этом роде?

Ответ №1:

измените свой CSS, это решаемая задача: D

файлы для редактирования: setting.css.lens[строка №524]

файлы для редактирования: setting.css.lens[строка №515]

CSS

 #grid:hover img:hover {
opacity: 1;
overflow: hidden;
zoom: 1;
}

#grid img {
overflow: hidden;
height: auto;
-webkit-transition: all .5s ease;
transition: all .5s ease;
zoom: 1;
}

Комментарии:

1. Привет! Спасибо за помощь, но ваше решение не работает. Вместо этого я изменяю ширину с 33.333333333333333333333333333333% до 33.3%. Разница минимальна, и эта раздражающая граница в один пиксель не появляется. 🙂