鼠标悬停时出现在图片上的CSS文本

Question

我正在制作CSS悬停效果。我想要做的是当用户将鼠标悬停在小缩略图上而不是显示文本时，并且当用户单击此缩略图时，它会显示大图像。我做了模态，但我一直有文字的麻烦。文字正好在图像下方，并且始终显示。我想移动图像的这个文本中心，并且仅当用户将鼠标悬停在图像上时才会出现。

CSS

 
 
     <!-- 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; 
 
      } 
 
    

 
 
HTML 
 

 
     <section class="cd-gallery"> 
 
\t \t \t <ul> 
 
\t \t \t \t <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>

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; 
} 

注意变换属性不被旧的浏览器

支持以下

见片断

<!-- 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; 
 
}

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>