Removing space between images - html

Question

imageI have a block of images but they are not connected to one another, I need to remove the spaces and make them looked attached. I have tried the following but doesn't work
img {
border: 0 none;
box-shadow: none;
padding:0px;
float: left;
display:block;
float:left;
line-height:0;
}
This is my html
<div class="col-xs-4 col-md-3 ">
<div class="hovereffect">
<img src="images/plasma.jpg" alt="Plasma" id="space">
<div class="overlay">
<h3>
Creativity on Combined Photos
</h3>
<p>
LINK HERE
</p>
</div>
</div>
</div>
Please see the image where the problem is.

Answer 1

.test{
display:flex
}
<div class="test">
<div class="hovereffect">
<img src="http://placehold.it/350x150">
<div class="overlay">
<h3>
Creativity on Combined Photos
</h3>
<p>
LINK HERE
</p>
</div>
</div>
<div class="hovereffect">
<img src="http://placehold.it/350x150">
<div class="overlay">
<h3>
Creativity on Combined Photos
</h3>
<p>
LINK HERE
</p>
</div>
</div>
</div>
is it something like this you are looking for?
I did this with flexbox you just give the parent of the images display:flex;
if you not want them one next to each other you can do it this way
.test{
display:flex;
flex-direction:column
}
.hovereffect{
display:flex;
}
<div class="test">
<div class="hovereffect">
<img src="http://placehold.it/350x150">
<div class="overlay">
<h3>
Creativity on Combined Photos
</h3>
<p>
LINK HERE
</p>
</div>
</div>
<div class="hovereffect">
<img src="http://placehold.it/350x150">
<div class="overlay">
<h3>
Creativity on Combined Photos
</h3>
<p>
LINK HERE
</p>
</div>
</div>
</div>

Answer 2

Please try this:
img {
border: 0 none;
box-shadow: none;
padding:0px;
float: left;
display:block;
margin:0;
line-height:0;
}