鼠標懸停時出現在圖片上的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>