To check out the website, click here (then navigate to the "portfolio" section).
I've been attempting to create a title that appears when an image is hovered over. I've formatted both the images and text to display upon hovering. I set the visibility of the div to hidden and used the hover tag to make it visible, but for some reason, it doesn't reappear when hovering. How can I ensure the div actually shows up when hovered over?
Here's the HTML code for just the first list item to keep things brief:
<li>
<a href="#openModal1">
<div class="imgwrap">
<img src="portfolio_images/poster.png">
<div class="textwrap"><p class="imgdes">Pedalfest Poster</p></div>
</div>
</a>
</li>
And here's the CSS code:
.imgwrap {
height:150px; width:150px;
}
.textwrap {
position:absolute;
width:150px; height:30px;
background-color:#727272;
margin-top:-30px;
visibility: hidden;
}
.imgdes {
text-align:center; font-family: Droid serif, serif;
font-weight:500; font-size:14px;
line-height:30px;
text-decoration:none; color:#f7f7f7;
top:50%;
}
.textwrap:hover {
visibility: visible;
}