Creating a CSS hover effect where text appears when the user hovers over a small thumbnail and a large image is displayed upon clicking. I have set up a modal for the image, but having difficulty with positioning the text. Currently, the text is located under the image and always visible. My goal is to center the text on the image and only display it when the user hovers over 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">×</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>