title: CSS text appears on image when mouse hover
body: <p>I'm making CSS hover effect. What I wanted to do is when user hover their mouse on small thumbnail than it shows text, and when user click this thumbnail it shows large image. I made modal but I keep having trouble with text. The text is right under the image and it shows all the time. I would like to move this text center of the image and only appears when user hovers their mouse on the image.</p>
  
  <p>CSS
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>      
        &lt;!-- filter style --&gt;
        &lt;link rel="stylesheet" href="css/style.css"&gt; 
        &lt;!-- modal style--&gt;
        &lt;link rel="stylesheet" href="css/w3.css"&gt;
  
          /* 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;
              }
          </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>       
  HTML
  
          &lt;section class="cd-gallery"&gt;
     &lt;ul&gt;
      &lt;li class="mix color-1 check1 radio2 option3"&gt;
                     &lt;div class="wrapper"&gt;
                      &lt;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'"/&gt;
                               &lt;p class="text"&gt;Band&lt;br&gt;Portrait&lt;/p&gt;&lt;/div&gt; 
                      
                      &lt;div id="modal01" class="w3-modal" onclick="this.style.display='none'"&gt;
                         &lt;span class=" w3-padding-16 w3-display-topright"&gt;&amp;times;&lt;/span&gt;
                       &lt;div class="w3-modal-content w3-animate-zoom"&gt;
                         &lt;img src="http://cfile1.uf.tistory.com/image/255D8B4E51ADD7CD04EF09" style="width:100%"&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                         
                    &lt;/li&gt;
                &lt;/ul&gt;
             &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>