Как убрать белое пятно на краях моих изображений, которое появляется только при наведении и только при переходе: все .2s; применяется?

Question

Обзор

Итак, я пытался выяснить это пару дней и надеялся, что кто-нибудь сможет помочь. По сути, у меня есть .gallery, содержащий div (с отображаемым flex на нем), и в нем три .gallery__item div, которые содержат по одному .gallery__image каждый. Я пробовал несколько методов, чтобы заставить размытие изображений при наведении Однако ни один из них не сработал без наличия там мигающей белой границы.

Ближайший метод, который близок к работе, - это преобразование: scale (1.1) и overflow: hidden, примененное к .gallery__item. Это работает, однако, так как переход происходит мгновенно, а также немного раздражает глаз, я решил применить переход к элементу, чтобы немного сгладить вещи, но когда я делаю это, я получаю белое пятно вокруг краев изображения снова.

• Белая граница img
• Код Pen

Другие методы:

1. фон-фильтр: размытие (5 пикселей) на псевдоэлементе :: before .gallery__item Проблема этого метода заключается в том, что для элемента .gallery__item необходимо явно указать его высоту и ширину; что-то, что с моим отзывчивым макетом не работает. Даже в этом случае у него все еще была белая граница.
2. Создание дублирующихся изображений, накладываемых друг на друга Это не сработало для меня. К сожалению, я не смог заставить их составлять стеки

В общем, все другие ресурсы в сети сказали увеличить изображение либо с помощью transform: scale (1.1); или возиться с полями. Ссылки здесь -> ( вопрос, связанный с полями и вопрос масштаба преобразования соответственно).

Моя проблема с белыми границами все еще сохраняется, и является уникальной, поскольку Я пробовал и реализовывал другие методы там, но у меня все еще другая проблема - только с эффектом наведения.

HTML

<div class="container">
  <div class="content">
      <div class="side-bar">
      </div> 
      <div class="hotel-view">
        <div class="gallery">
          <div class="gallery__item">
            <img src="https://i.ibb.co/L0JbQ2b/hotel-1.jpg" alt="" class="gallery__image">
          </div>
          <div class="gallery__item">
            <img src="https://i.ibb.co/1Xpvp5J/hotel-2.jpg" alt="" class="gallery__image">
          </div>
        </div>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
      </div>
  </div>
</div>

CSS

.gallery {
  display: flex;
  justify-content: space-around;
}    
.gallery__item {
    overflow: hidden;        
}    
.gallery__image {
    display: block;
    width: 100%;
    transition: all .2s;
}    
.gallery__image:hover {
    filter: blur(5px);
    transform: scale(1.1);
}

Если вам нужно больше информации, дайте мне знать; Я рад поделиться всем, что могу.

Answer 1

изменение элемента галереи css в отношении ссылки на кодовое перо:

.gallery__item {
    background : black;
    overflow: hidden;
               }

изменит ее на черный.

Это говорит о том, что вы видите общий белый фоновый набор, который занимает некоторое время, чтобы измениться.

Возможно, вам стоит пересмотреть статически заданные фоны и проверить количество вычислений и зависимостей, чтобы визуализировать поведение в реальном времени.