How to get background colour to 'overflow' behind a spritsheet image on hover?

Question

I am working on a website where a user can select an icon and send it as a request to one of my bots.

I've already got it sorted out. I'm mainly just working on improving the aesthetics.

What I want to happen is, when hovering over an icon (or even selecting it), it shows a light blue background colour to indicate that it's been selected, because right now there is nothing to indicate a chosen icon except for the div at the very top (which isn't always in sight when you scroll further down).

The code I have atm is:

.flair:hover, .selected{
        background-color: #3498db;
        border-radius: 2px;
    }

I've tried adding some padding but since each image is in a spritesheet, it will overlap with other images.

I've also tried using a border instead to emulate the same effect, but hovering over an image would slightly move the other images due to the border being applied and it gets annoying.

Is there some way I can get my background-color to 'overflow' behind the images?

Answer 1

How about you add a transparent border add the begining as a placeholder and change your margins since borders gonna add some space

.flair {
  border: 2px solid transparent;
  background-clip : padding-box;
  margin-right:6px;
  margin-top:6px;
}

and then you color it with some additional glow when hovering

.flair:hover {
  box-shadow: 0 0 10px #3498db;
  border: 2px solid #3498db;
}

Answer 2

Please try this :

.flair:hover, .selected {
  border: 1px solid #3498db;
  border-radius: 2px;
  box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
}