CSS Divs Jumping when Border Added

Question

I'm can't understand why the boxes shift when I hover over the first one (top-left). I've set box-sizing to border-box so the added border on hover shouldn't effect things, and it only happens on the frst box. Please help!

JS fiddle here.

* {
  box-sizing: border-box !important;
}

body{
    font-family: Arial, Helvetica, sans-serif;
}

#gameArea {
  width: 700px;
  margin: 0 auto;
}

h1{
    text-align: center;
}

.card {
  float: left;
  margin: 10px;
    padding: 20px;
  background: lightblue;
  text-align: center;
  border-radius: 5px;
  box-shadow: 10px 10px 10px #ccc;
}

.hidden{
    display: none;
}

.card:hover {
  cursor: pointer;
  border: 3px solid blue;
}

.card p {
  font-size: 48px;
  color: blue;
}

img {
    width: 250px;
    height: 188px;
    vertical-align: middle;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
        margin:0;
}

Answer 1

That is because border width adds to the element's width, thus when an additional width is added to an element on hover, it will alter the normal layout flow.

You can easily fix it by adding a 3px transparent border in the static state:

.card { border: 3px solid transparent; }

jsFiddle fork: https://jsfiddle.net/azizn/pL2j0zu5/