Overlaying text on image not working - css

Question

I have three images in a row. The images don't have text in them. That needs to be added with the code. I used the method described in posts here (using relative and absolute positions) and have it somewhat working. Here is the jsfiddle. There are two main problems.
First, the placement isn't consistent. If the window is resized, the text doesn't move with the image. On a smartphone, the text disappears completely.
Second, when the images are mousedover they expand. But if the mouse is moved over the text, the expanding stops. If I remove the z-index then the text disappears when the image is mousedover. I want to have the text always show but also to expand the image. My code is below. It is taken from the example here, except for the text overlay, which I added. Is it possible to add text to an image that changes and have it work as described?
<style>
.nav {margin:0; padding-top:5px;overflow:hidden}
.nav-items {border:1px solid black}
.nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 500ms ease-in;
-webkit-transform: scale(2.1);
-ms-transition: all 500ms ease-in;
-ms-transform: scale(2.1);
-moz-transition: all 500ms ease-in;
-moz-transform: scale(2.1);
transition: all 500ms ease-in;
transform: scale(2.1);
}
.nav-items img {
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
#bannerText_0,
#bannerText_1,
#bannerText_2{
position:absolute;
font-size:20px;
line-height: 150%;
color:#fff;
top:60px;
background:transparent;
z-index:999;
}
#bannerText_0{left:10%;}
#bannerText_1{left:35%;}
#bannerText_2{left:60%;}
</style>
<div class="banner_set">
<ul class="nav">
<li id="0" class="nav-items"><img src="http://placehold.it/130x130"></li>
<div id="bannerText_0">Img 1</div>
<li id="1" class="nav-items"><img src="http://placehold.it/130x130"></li>
<div id="bannerText_1">Img 2</div>
<li id="2" class="nav-items"><img src="http://placehold.it/130x130"></li>
<div id="bannerText_2">Img 3</div>
</ul>
</div>

Answer 1

The main problem is that the structured your HTML incorrectly - you can't put <div>s in between the <li> elements in the <ul>.
As well as causing the broken layout, its also the reason the mouseover on the text affects the image doesn't work - the text isn't actually inside an nav-item element that has the hover effect.
You can solve all your problems by putting your div's inside the <li> elements!
Bonus Fix :), I've also fixed the space at the bottom under the image - just make the image display:block;.
Your Fiddle, updated with these changes: https://jsfiddle.net/pcpg7zww/2/
Working snippet:
.nav {margin:0; padding-top:5px;overflow:hidden}
.nav-items {border:1px solid black}
.nav-items {position:relative;margin-left:0px; display:inline-block; overflow: hidden;}
.nav-items:hover img {
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 500ms ease-in;
-webkit-transform: scale(2.1);
-ms-transition: all 500ms ease-in;
-ms-transform: scale(2.1);
-moz-transition: all 500ms ease-in;
-moz-transform: scale(2.1);
transition: all 500ms ease-in;
transform: scale(2.1);
}
.nav-items img {
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
display:block; /* this will remove the space at the bottom */
}
#bannerText_0,
#bannerText_1,
#bannerText_2{
position:absolute;
font-size:20px;
line-height: 150%;
color:#fff;
top:60px;
background:transparent;
z-index:999;
}
#bannerText_0{left:10%;}
#bannerText_1{left:35%;}
#bannerText_2{left:60%;}
<div class="banner_set">
<ul class="nav">
<li id="0" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_0">Img 1</div>
</a>
</li>
<li id="1" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_1">Img 2</div>
</a>
</li>
<li id="2" class="nav-items">
<a href="example.com">
<img src="http://placehold.it/130x130">
<div id="bannerText_2">Img 3</div>
</a>
</li>
</ul>
</div>