El Cuadro Del Div Afecta mi box-shadow [CSS]

[SrTrp]

Buenas lo que quiero lograr es un efecto como el de la derecha, pero lo que hace es que me da el efecto de la izquierda mi imagen es png. no se si sea porque le estoy asignando el background como imagen al mismo div, como podría solucionar esto?

Código (html4strict) [Seleccionar] Expandir


<div class="Coin">
            <p><?php echo $_SESSION['monedas']; ?></p>
        </div>


Código (css) [Seleccionar] Expandir


.Coin:hover{
  cursor:pointer;
  -moz-box-shadow: 0px 0px 42px #12bfff;
  -webkit-box-shadow: 0px 0px -2px #12bfff;
  box-shadow: 10px 0px 44px #12bfff;

}
.Coin{
  background-image: url("../Imgs/coin.png");
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Coin p{
  font-size:20px;
  color:white;
}


[@XSStringManolo]

Métele un borde rounded y lo quitas.
border-radius: 50%;
border: 0;

Con lo que tienes funciona 100%

Asegúrate de tener centrada la moneda. Así te es más fácil que quede bien. Te es más sencillo retocarla gráficamente que ajustar en el css.

No te recomiendo usar px como medida. Si tengo una pantalla de 3 metros no veo la moneda. Y si tengo una mini solo veo una moneda enorme.

Tampoco cualquier técnica responsive que veas por ahí, porque te puede estirar la imagen, duplicarla, repetirla, etc. Y es un show diseñar así.

Mete el meta tag del viewport y usa vw y vh para los tamaños. Y media query para las distintas resoluciones.
Es mejor incluso usar solo vw el 100% de las veces porque algunos dispositivos sacan el teclado táctil en pantalla y reducen el alto del viewport no dándote un diseño estable que a lo mejor buscas.

También puede hacer diseños responsive con grids o con javascript usando body.innerWidth y medidas así. Hay librerías completas basado en ello. Yo prefiero no usar javascript para no bloquear el IU. Usando css puede correr animaciones secillamente detrás de un alert por ejemplo.