2
votes

boîte-ombre n'apparaissant que sur le côté gauche d'une image

J'ajoute un élément img via jQuery et j'essaie d'ajouter une box-shadow à tous les côtés de l'image lors d'un événement de clic. Cependant, l'ombre n'apparaît que sur le côté gauche de l'image. Comment puis-je ajouter une ombre sur tous les côtés de l'image?

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

#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;
}

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');
  }
});

jquery html css image box-shadow

1 commentaires

Ceci est dû au débordement sur la #collection . À moins d'ajouter une certaine marge à l ' img pour laisser de l'espace pour le box-shadow , vous ne pouvez pas faire grand-chose

3 Réponses :

0
votes

Vous avez spécifié un rayon de flou de 50 pixels. Ainsi, si la taille de l'image d'un côté est supérieure à 50 px, elle ne sera pas visible. Une meilleure façon est d'utiliser deux valeurs pour l'ombre de la boîte.

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

J'espère que cela vous aidera.Si cela ne résout pas le problème, veuillez partager une capture d'écran.

1 commentaires

Vous pouvez voir en modifiant l'extrait de code que cela n'obtient pas le même effet.

0
votes

Je vous suggère de jouer avec vos propriétés de débordement . Parfois, si un conteneur n'est pas assez grand et que vous n'avez pas la bonne visibilité, des choses peuvent être coupées (comme celles de box-shadow). Même si vous avez défini quelque chose pour faire défiler, la boîte-ombre ne compte pas comme "contenu supplémentaire" pour un élément, ce qui le rend non-scrollable.

0 commentaires

0
votes

.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);
}

0 commentaires