Multiple divs on top multiple images - html

Question

How to make multiple images with a tag name as a link on top of each one?
I can make only one image with a tag name on top of the image, but not other ones. Somehow when I copy the whole div (contains the img and the tag's div), it doesn't show the tags on other images.
I've tried: position: relative for the parent div, position: absolute for the tag (child div), make the image float: left.
I've also tried to "stick" the child div with its parent.
I've tried adding div and class for each item: image, image container, tag, a tag...
.container {
position: relative;
width: 400px;
height: 400px;
}
.container img {
width: 100%;
/*I've tried with px, doesn't make a difference*/
float: left;
/*I've also tried adding a class for img and position: absolute*/
}
.nameTag {
width: 100%;
height: 50px;
position: absolute;
background-color: gray;
}
.nameText {
color: white;
}
<div class="container">
<img src="assets/images/img1.png" />
<div class="nameTag">Mobile App</div>
</div>
<div class="container">
<img src="assets/images/img2.png" />
<div class="nameTag">Mobile App</div>
</div>
<div class="container">
<img src="assets/images/img3.png" />
<div class="nameTag">Mobile App</div>
</div>

Answer 1

Not sure if this is exactly what you are looking for but this is what I've changed in your CSS:
.container {
position: relative;
display: inline-block; //allowed images to float
width: 400px;
height: 400px;
}
.nameTag {
width: 100%;
height: 50px;
position: absolute;
background-color: gray;
top: 100px; //positioned about half way down the image
text-align: center; //center the link text
}
Here is a link to the CodePen for you to view. Let me know!

Answer 2

Try changing your float to "none" or copy/paste this into your html/css files.
Hope this helps.
.container {
position: relative;
width: 400px;
height: 400px;
}
.container img {
width: 100%;
/*I've tried with px, doesn't make a difference*/
float: none;
/*I've also tried adding a class for img and position: absolute*/
}
/* ^^^ Change float to "none"...seems to work here */
.nameTag {
width: 100%;
height: 50px;
position: relative;
background-color: gray;
}
.nameText {
color: white;
}
<div class="container">
<div class="nameTag">Mobile App</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUiyrmhTXFppqk4aYzqTOU9nimCQsYibukwAV8rstsDkAVQT-mA" />
</div>
<div class="container">
<div class="nameTag">Mobile App</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUiyrmhTXFppqk4aYzqTOU9nimCQsYibukwAV8rstsDkAVQT-mA" />
</div>
<div class="container">
<div class="nameTag">Mobile App</div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUiyrmhTXFppqk4aYzqTOU9nimCQsYibukwAV8rstsDkAVQT-mA" />
</div>