When using jQuery to append an img element and apply a box-shadow on click, I am only seeing the shadow appear on the left side of the image. How can I make the box shadow show up on all sides of the image?
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>