Unwanted white space after adding captions to images

Hello,

I am really new to website design and have been learning a lot over the past few weeks. I am redesigning my band website.
This is the link…HERE

I have made up some images that I want to have no space inbetween. I managed to get them to sit like that but after I added captions some unwanted white space appear at the top and bottom of each image. I can’t see where to get rid of this space and its confusing me.

I have custom built through CSS some hover animations for the images and their captions. Maybe something weird is going on with the custom CSS. The image classes are set to

class=link-img

Here is my custom code for the images and captions

.link-img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.link-img:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}


.entry-content .wp-caption {
    border: none;
    box-shadow: none;
    background: none;
    padding: 0;
}

.entry-content .wp-caption p.wp-caption-text {
    position: relative;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    padding-left: 15px;
    text-align: center;
    top: -63px;
    -webkit-filter: opacity(0);
	filter: opacity(0)
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.entry-content .wp-caption img {
    box-shadow: none;
}

.entry-content .wp-caption img:hover + .wp-caption-text {
    -webkit-filter: opacity(1);
	filter: opacity(1)
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}