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

Question

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.

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

Answer 1

insert these rules in your document

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

Note the transform property is not support by old browsers

See snippet below

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