CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Lara Whateley
Lara Whateley

Reputation: 1

Caption underneath image mouseover not working properly

I'm having trouble getting the text to appear beneath the image. Instead it's resting in the image when I mouse over. I'm sure this is a simple fix but I'm driving myself crazy here. If I remove the inline display function the bullet points show up. Any ideas?

Here's what I've got so far...

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();
});

Upvotes: 0

Views: 35

Answers (1)

CuriousMind
CuriousMind

Reputation: 3173

You need to define top for the div. Refer below snapshot.

ul li div {
  display: none; 
  position: absolute;
  top:150px;
}

The top should be adjusted as per the image + font size displayed. You can check fiddle here.

Upvotes: 1

Related Questions