在图像上覆盖文本不起作用

Question

我连续三张图片。图片中没有文字。这需要与代码一起添加。我使用了此处帖子中描述的方法（使用相对位置和绝对位置）并让它有点工作。这是jsfiddle。有两个主要问题。

首先，位置不一致。如果调整窗口大小，文本不会随图像移动。在智能手机上，文字会完全消失。

其次，当图像被鼠标悬停时，它们会展开。但是如果鼠标移到文本上，扩展就会停止。如果我删除 z-index，那么当图像悬停时文本就会消失。我希望始终显示文本，但也希望扩展图像。我的代码如下。它取自示例here，除了我添加的文本覆盖。是否可以将文本添加到发生变化的图像并使其按描述工作？

    <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"><a href="example.com"><img src="http://placehold.it/130x130"></a></li>
      <div id="bannerText_0">Img 1</div>
      <li id="1" class="nav-items"><a href="example.com"><img src="http://placehold.it/130x130"></a></li>
      <div id="bannerText_1">Img 2</div>
      <li id="2" class="nav-items"><a href="example.com"><img src="http://placehold.it/130x130"></a></li>
      <div id="bannerText_2">Img 3</div>
     </ul>
    </div>

Answer 1

主要问题是您的 HTML 结构不正确 - 您不能将 <div>s 放在 <ul> 中的 <li> 元素之间。

除了导致布局损坏之外，它也是文本上的鼠标悬停影响图像不起作用的原因 - 文本实际上不在具有悬停效果的 nav-item 元素内。

您可以通过将 div 放入 <li> 元素中来解决所有问题！

Bonus Fix :)，我还修复了图像下方底部的空间 - 只需将图像设为 display:block;。

你的小提琴，更新了这些变化：https://jsfiddle.net/pcpg7zww/2/

工作sn-p：

.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>