マウスを動かすと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

transformプロパティをドキュメントに

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