image hover caption

by stackmanoz

HTML

<div class="area">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
    <p>This image has some area</p>
</div>

CSS

.area {
    display: inline-block;
    background: black;
    padding: 0;
    position:absolute;
}


p{
    display:none;
    position:absolute;
    bottom:0;
    width:100%;
     left:0px;
    float:left;
    color:white;
    height:3em;
    background:black;
text-align:center;
line-height:40px;    
}

.area img {
    display: block;
    
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

.area:hover img {
    opacity: 0.7;
            
}

JavaScript

$('.area').hover(
    function(){
       $(this).find('p').fadeIn(500); 
    },
    function(){
       $(this).find('p').fadeOut(1000); 
    }
    );