Unwanted space on an edge with Hover event

Question

I’m trying to replicate the menu effect of OW game modes selection and I came across the following problem:

Apparently it is working right. However, when the border appears, it has an extra spacing just below.

Code (replicate of Codepen):

.bastion-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: lightslategray;   
}

.bastion {
    margin: 3px;
    border: 2px solid transparent;
    transition: all .5s;
}
.bastion-size {
    height: 200px;  
}
.bastion:hover {
    transition: all .5s;
    transform: scale(1.1);
    border: 2px solid white;
}

  <section class="bastion-container">
       <div class="bastion">
           <img class="bastion-size"src="//i.imgur.com/SZ9qGcM.png">
       </div>
       <div class="bastion">
           <img class="bastion-size"src="//i.imgur.com/SZ9qGcM.png">
       </div>
       <div class="bastion">
           <img class="bastion-size"src="//i.imgur.com/SZ9qGcM.png">
       </div>
       
   </section>

OBS: Refill of 0 (https://codepen.io/utamo/pen/EGqExQ) and I did, but I don’t know where I went wrong with that code. I opened it in Chrome, I checked margin and padding and found nothing. It is simply an empty space that is there...

Answer 1

You would solve the problem by applying display: block in the image, that is, in the class .bastion-size. That’s because the tag img is inline, as explained in this question:

Behold:

.bastion-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: lightslategray;   
}

.bastion {
    margin: 3px;
    border: 2px solid transparent;
    transition: all .5s;
  
}
.bastion-size {
    height: 200px;  
    display: block; /* AQUI */
}
.bastion:hover {
    transition: all .5s;
    transform: scale(1.1);
    border: 2px solid white;
}

  <section class="bastion-container">
       <div class="bastion">
           <img class="bastion-size"src="//i.imgur.com/SZ9qGcM.png">
       </div>
       <div class="bastion">
           <img class="bastion-size"src="//i.imgur.com/SZ9qGcM.png">
       </div>
       <div class="bastion">
           <img class="bastion-size"src="//i.imgur.com/SZ9qGcM.png">
       </div>
       
   </section>

Answer 2

The problem is why you put the effect on div external image, so is applied the scale in the div, but the image does not follow, putting the effect on the image itself the problem is solved, as in the example below:

.bastion-container {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: lightslategray;   
}

.bastion-size {
    height: 200px;  
}

.bastion {
    margin: 3px;
    border: 2px solid transparent;
    transition: all .5s;
}

.bastion:hover img {
    transition: all .5s;
    transform: scale(1.1);
    border: 2px solid white;
}

  <section class="bastion-container">
       <div class="bastion">
           <img class="bastion-size"src="//i.imgur.com/SZ9qGcM.png">
       </div>
       <div class="bastion">
           <img class="bastion-size"src="//i.imgur.com/SZ9qGcM.png">
       </div>
       <div class="bastion">
           <img class="bastion-size"src="//i.imgur.com/SZ9qGcM.png">
       </div>
   </section>