Bootstrap overlapping images thumbail - html

Question

So I'm using the Bootstrap Thumbnail grid system, everything is looking ok apart from the images seem to be overlapping and I can't work out why? I've attached an image too.
When I'm hovering over the images the images in the middle are overlapping each other? I don't know if I'm being completely stupid or it's a bootstrap default I just can't win at?
HTML
<div class="top-header"class="page-header">
<h1>Smile Board</h1>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image01.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image02.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image03.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image04.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image05.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image06.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image07.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image08.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image01.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image02.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image03.png" alt="">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="./images/image04.png" alt="">
</a>
</div>
</div>
CSS
body {
font-family: 'Baloo Bhaina', cursive;
}
#media (min-width: 1200px)
.container {
width: 1170px;
}
h1 {
text-align: center;
}
.page-header {
background-color: #EFEC86;
padding-top: 20px;
width: 1130px;
}
.top-header {
width: 1130px;
background-color: #EFEC86;
padding-top: 20px;
width: 1290px;
}
.sub {
background-color: #EFEC86;
padding-top: 20px;
}
img {
width: 100%;
height: auto;
display: block;
overflow: auto;
}
.thumbnail {
width: 300px;
height: 300px;
overflow: auto;
max-width:calc(150% - 10px);
margin:0 16px;
}
.thumbnail:hover {
background-color: #EFEC86;
}
.row {
margin-right: 50px;
margin-left: -15px;
}

Answer 1

Why not adding margin when you are hovering each item. Just add margin on the .thumbnail class when it is hovered so that it will not destroy your other item