hover en imagenes YoelMontes

by cristian_cena

HTML

<div id="wrap">
    <div class="elem">
        <img src="http://www.abcfotos.com/images/fotos-paisaje-helado-p.jpg" alt="">
        <p>lorem ipsum img 1 ... <br/> lorem ipsum img 1 ...</p>
    </div>
    <div class="elem">
        <img src="http://beforeitsnews.com/ckfinder/userfiles/0000000000005477/images/volcano3.jpg" alt="">
        <p>lorem ipsum img 2 ...</p>
    </div>
</div>

CSS

.elem {
    width:250px;    
    height:250px;
    position:relative;   
    margin:5px;
    overflow:hidden; 
    border:1px solid white;   outline:1px solid gray;
    font-family:tahoma;
    font-size:11px;
}
.elem img, .elem p{
    position:absolute; left:0; 
    width:250px;
    height:250px;
}
.elem img{
    top:0; z-index:0;
    
}
.elem p{
    width:250px; height:auto;   
    display:none;
    bottom:0; z-index:1;
    background:#000;
    color:#fff;
    padding:5px 10px;
}

JavaScript

$(".elem").hover(
    function(){
        $(this).find("p").fadeIn("fast");
    },
    function(){
        $(this).find("p").fadeOut(500);
    }
);