тень от тени, отображаемая только на левой стороне изображения

Question

Я добавляю элемент img через jQuery и пытаюсь добавить box-shadow ко всем сторонам изображения при событии щелчка.Однако тень появляется только на левой стороне изображения.Как добавить тень со всех сторон изображения?

var someNumbers = [1, 2, 3];

$.each(someNumbers, function(index, element) {
  $('#collection').append('<img src="' + someNumbers[index] + '"/>');
});

$('#collection img').on({
  click: function() {
    $('#mainImage').attr('src', $(this).attr('src'));
    $(this).addClass('selectedImgStyle');
  }
});

#collection {
  position: absolute;
  height: 100px;
  width: 500px;
  left: 50%;
  transform: translate(-50%);
  margin-top: 2%;
  display: inline-block;
  white-space: nowrap;
  border-radius: 20px;
  overflow: visible;
  overflow-x: scroll;
}

#collection img {
  height: 100px;
  width: 100px;
  cursor: pointer;
}

.selectedImgStyle {
  box-shadow: 0px 0px 50px red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="collection"></div>

Answer 1

Я бы предложил сыграть с вашими свойствами overflow .Иногда, если контейнер недостаточно большой, и у вас нет необходимой видимости, вещи могут быть обрезаны (например, box-shadow).Даже если у вас есть что-то для прокрутки, box-shadow не считается «дополнительным содержимым» элемента, что делает его не подлежащим прокрутке.

Answer 2

.selectedImgStyle{
box-shadow: 0 0 50px rgba(255,0,0,0.6);
-moz-box-shadow: 0 0 50px rgba(255,0,0,0.6);
-webkit-box-shadow: 0 0 10px rgba(255,0,0,0.6);
-o-box-shadow: 0 0 50px rgba(255,0,0,0.6);
}

Answer 3

Вы указали радиус размытия 50 пикселей.Таким образом, если размер изображения на одной стороне больше 50 пикселей, он не будет виден.Лучше всего использовать 2 значения для тени блока.

box-shadow: 2px 2px 2px red, -2px -2px 2px red;

Надеюсь, это поможет. Если это не решит проблему, поделитесь снимком экрана.