Is there a way to create multiple images with a tag name overlaying each one as a link? I've been able to add a tag name on top of one image, but not on others. Every time I try to duplicate the div containing the image and tag, the tags do not show up on the other images.
I have experimented with using position: relative for the parent div, position: absolute for the tag (child div), and using float: left for the image.
Additionally, I have attempted to ensure the child div stays with its parent and have added separate div and class for each element: image, image container, tag, and link.
.container {
position: relative;
width: 400px;
height: 400px;
}
.container img {
width: 100%;
/*Tried with pixel values, no change*/
float: left;
/*Also tried using a class for the img with 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"><a href="" class="nameText">Mobile App</a></div>
</div>
<div class="container">
<img src="assets/images/img2.png" />
<div class="nameTag"><a href="" class="nameText">Mobile App</a></div>
</div>
<div class="container">
<img src="assets/images/img3.png" />
<div class="nameTag"><a href="" class="nameText">Mobile App</a></div>
</div>