CODEWITHSUNDEEP
htmlcssgoogle-chrome
leonheess
leonheess

Reputation: 21520

Why are there gaps between the box-shadow and the element?

When hovering over the button in Chrome (76.0.3809.100, 64-bit) faint gaps between the box-shadow and the img appear - why does this happen and how can I fix it?

Here is an image in case you can't see it in the snippet:

enter image description here

body {
  background-color: firebrick;
}

button {
  all: unset;
  height: 200px;
  width: 200px;
  overflow: hidden;
}

button:hover > img {
  transform: scale(1.15);
}

button > img {
  height: 70%;
  margin: auto;
  display: block;
  box-shadow: 0 0 0 50px #fff;
}
<button><img src="https://thewthr.app/img/search.png"></button>

Upvotes: 2

Views: 476

Answers (1)

Temani Afif
Temani Afif

Reputation: 274262

Add an extra inset box-shadow to reduce this effect:

body {
  background-color: firebrick;
}

button {
  all: unset;
  height: 200px;
  width: 200px;
  overflow: hidden;
}

button:hover > img {
  transform: scale(1.15);
}

button > img {
  height: 70%;
  margin: auto;
  display: block;
  box-shadow: 
   0 0 0 50px #fff,
   0 0 0 2px #fff inset;
}
<button><img src="https://thewthr.app/img/search.png"></button>

A similar question: CSS rotated text with background shows some background-issues. Seems that any kind of transform create some issues with box-shadow

Upvotes: 1

Related Questions