I'm having trouble getting the text to appear correctly underneath the image. Whenever I hover over the image, the text seems to overlap it. I am sure there is a simple solution to this issue, but I can't seem to figure it out. Removing the inline display function makes the bullet points visible. Any suggestions on how to fix this?
Here's my current code...
CSS
ul li {
float:left;
text-align: center;
font-family: Helvetica;
font-size: 15px;
display: inline;
padding:10px;
margin:5px;
background-image: none;
position: relative;
}
ul li div {
display: none;
position: absolute;
}
HTML
<div class="ul li">
<ul>
<li>
<div class="caption">About</div>
<img src='about.png'/>
</li>
<li>
<div class="caption">Portfolio</div>
<img src='portfolio.png'/>
</li>
<li>
<div class="caption">Resume</div>
<img src='resume.png'/>
</li>
<li>
<div class="caption">Contact</div>
<img src='contact.png'/>
</li>
</ul>
</div>
Javascript
$('ul li').mouseenter(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeIn();
}).mouseleave(function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeOut();
});