Overlay info window

by Andrew Pougher

HTML

<p class="caption">
<img src="http://www.foundshit.com/pictures/cats/cross-eyed-cat.jpg" alt ="" data-info="Meeow purrrrr, Dude feed me now! Damnit..."/>
<span></span></p>
<p class="caption">
<img src="http://www.foundshit.com/pictures/cats/cross-eyed-cat.jpg" alt ="" data-info="Meeow purrrrr. Time I got some glasses or is something sitting on my nose..."/>
<span></span></p>

CSS

p.caption {
    display: block !important;
    position: relative !important;
    border: 5px solid white;
position:relative;
    margin:4px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.80);
}
p.caption img {
    position: absolute !important
}
p.caption span {
    background: #000;
    background: rgba(0,0,0,0.8);
    color: white !important;
    display: none;
    padding: 5px 10px !important;
    text-align: center;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
}
p.caption span big {
    font-weight: bold;
}

JavaScript

$("p.caption").each(function() {
    $(this).css({
        "height": $(this).children("img").height() + "px",
        "width": $(this).children("img").width() + "px"
    }).children("span").text($(this).children("img").data("info")).css("width", $(this).width() - 18 + "px")
    $("p.caption").hover(function() {
        $(this).children("span").stop(true, true).fadeTo(400, 1);
    }, function() {

        $(this).children("span").stop(true, true).delay(300).fadeOut(400);
    });

});