Overlay with words across multiple images - html

Question

I am making a instagram type of feed and have a 4 images with a further 4 below those 4. I need to make a overlay which I can put words in front of all 8 images showing instagram followers and a link to their instagram.
I have most of it done but the overlay I cannot seem to get it to work. Any help would be appreciated, thanks in advance.
Josh
<ul class="images">
<div class="col-sm-3">
<img src="img/instagram/image-1.jpg" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="img/instagram/image-2.jpg" alt="Image Gallery" class="img-responsive">
</div>
</ul>

Answer 1

Use o overlay div with position absolute covering the entire images container like the example....
.images{
position:relative;
display:inline-block;
}
.overlay{
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.5);
width: 100%;
height: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
}
.images:hover .overlay{
visibility: visible;
}
<div class="images">
<div class="col-sm-3">
<img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="http://via.placeholder.com/350x150" alt="Image Gallery" class="img-responsive">
</div>
<div class='overlay'>
<span>some text</span>
</div>
</div>

Answer 2

Like this? You can put whatever words in the overlay as you want. I used xs columns so you could see it fully.
.overlay{
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:rgba(0,0,0,.5);
z-index:10;
}
.overlay h2{
color:#fff;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="overlay">
<h2>Follow me on Insta</h2>
</div>
<div class="row images">
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="http://fillmurray.com/200/300" alt="Image Gallery" class="img-responsive">
</div>
</div>
</div>

Answer 3

I think the below is what you need. I used flexboxes for layout.
* {
box-sizing: border-box;
}
.container {
display: flex;
justify-content: flex-start;
flex-flow: wrap;
width: 500px;
}
.item {
display: inline-block;
margin: 0 0.5em 0.5em 0;
position: relative;
}
.text {
opacity: 0;
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
top: 0;
}
.text:hover {
border: thin solid red;
animation: opac 0.3s ease forwards;
}
#keyframes opac {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row-sm-12 container">
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
<div class="row-sm-3 item">
<img src="http://placehold.it/100">
<div class="text">Bla bla</div>
</div>
</div>