鼠标悬停时，CSS文本显示在图像上

Question

我正在制作CSS悬停效果。我想要做的是当用户将鼠标悬停在小缩略图上而不是显示文本时，当用户点击此缩略图时，它会显示大图像。我做了模态，但我一直遇到文本问题。文本位于图像下方，始终显示。我想移动图像的文本中心，只有当用户将鼠标悬停在图像上时才会显示。

CSS

＆＃13;

＆＃13;

      
      <!-- filter style -->
      <link rel="stylesheet" href="css/style.css"> 
      <!-- modal style-->
      <link rel="stylesheet" href="css/w3.css">

        /* image style*/
         #wrapper{
            position:relative;
            
        } 

       /* text style*/
        #wrapper p{
            z-index:100;
            position:absolute;
            top:50%;
            left:90%;
            visibility:hidden;
            font-family:'Alegreya', serif;
            opacity: 0;
            color:white;
            }
    
        
         #wrapper:hover #wrapper p{
              visibility: visible;
              opacity: 1;
            }
        

＆＃13;

       
HTML

        <section class="cd-gallery">
			<ul>
				<li class="mix color-1 check1 radio2 option3">
                   <div class="wrapper">
                    <img src="http://cfile1.uf.tistory.com/image/255D8B4E51ADD7CD04EF09" alt="Image 1" style="width:100%;cursor:zoom-in"
                         onclick="document.getElementById('modal01').style.display='block'"/>
                             <p class="text">Band<br>Portrait</p></div> 
                    
                    <div id="modal01" class="w3-modal" onclick="this.style.display='none'">
                       <span class=" w3-padding-16 w3-display-topright">&times;</span>
                     <div class="w3-modal-content w3-animate-zoom">
                       <img src="http://cfile1.uf.tistory.com/image/255D8B4E51ADD7CD04EF09" style="width:100%">
                      </div>
                  </div>
                       
                  </li>
              </ul>
           </section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在您的文档中插入这些规则

.text {
  opacity: 0;
  display: inline-block;
  text-align: cen;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
}
.wrapper:hover .text {
  opacity: 1;
}

请注意旧浏览器不支持转换属性

请参阅下面的代码段

＆＃13;

＆＃13;

<!-- filter style --> <link rel="stylesheet" href="css/style.css"> <!-- modal style--> <link rel="stylesheet" href="css/w3.css">
/* image style*/

#wrapper {
  position: relative;
}
/* text style*/

#wrapper p {
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 90%;
  visibility: hidden;
  font-family: 'Alegreya', serif;
  opacity: 0;
  color: white;
}
#wrapper:hover #wrapper p {
  visibility: visible;
  opacity: 1;
}
.text {
  opacity: 0;
  display: inline-block;
  text-align: cen;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
}
.wrapper:hover .text {
  opacity: 1;
}

＆＃13;

HTML

<section class="cd-gallery">
  <ul>
    <li class="mix color-1 check1 radio2 option3">
      <div class="wrapper">
        <img src="http://cfile1.uf.tistory.com/image/255D8B4E51ADD7CD04EF09" alt="Image 1" style="width:100%;cursor:zoom-in" onclick="document.getElementById('modal01').style.display='block'" />
        <p class="text">Band
          <br>Portrait</p>
      </div>

      <div id="modal01" class="w3-modal" onclick="this.style.display='none'">
        <span class=" w3-padding-16 w3-display-topright">&times;</span>
        <div class="w3-modal-content w3-animate-zoom">
          <img src="http://cfile1.uf.tistory.com/image/255D8B4E51ADD7CD04EF09" style="width:100%">
        </div>
      </div>

    </li>
  </ul>
</section>

＆＃13;

＆＃13;

＆＃13;