simple unbloated method for applying a div as a mouseover fadein 100% width caption

Question

The title pretty much says it all. There are tons of scripts out there that do so, but most of them are so bloated and end up messing up script, and just use info from alt tags. My script goes as follows:

<ul>
     <li style="display:block">
           <img src="images/portfolio/talktostrangers/1.jpg" />
                <div class="caption">
                <span class="projecttitle">Talk to Strangers</span>A social awareness campaign that proposes people talk to strangers on trains, subways, elevators, & the like.
                </div>
     </li>
</ul>

The preview can be viewed here to get an idea of where it will go: http://www.studioimbrue.com/beta

Answer 1

If I understand correctly, you just want the caption to show when hovering over an image. The best way to do that is with javascript. I recommend using a js Framework, like jQuery, which makes it really easy. You can just include the jQuery source code and put this in a script tag or an external file within the head of your document.

$(document).ready(function(){
    $('li img').hover(function(){
       $(this).siblings('div.caption').fadeIn('slow');
    }, function(){
       $(this).siblings('div.caption').fadeOut('slow');
    });
});

Then it's all about css styling, opacity, background-color, text-color. Up to you.

Regarding the 100% width in the title of your question, because it's in a DIV tag, it should automatically fill 100% of it's parent, the LI.