isotope test #1

HTML

<div id="wrap">
    
        <div id="brick1" class="brick">
            <img src="http://placekitten.com/250/200" class="fade"/>
            <p>here is the extra text that should show up when hovered upon</p>
        </div>
        
    </div>

CSS

body{
        background-color:#ccc;
    }
    #wrap{
        width:800px;
        position:relative;
        text-align:center;
        margin:0px auto 0px auto;
        background-color:#fff;
    }
    
    #brick1{
        width:250px;
        height:200px;
    }
    
    .brick{
        overflow:show;
    }

JavaScript

$(document).ready(function(){
        $(".fade").hover(
            function() {    
                $(this).animate({opacity: 0}; 300);
            },function(){
                $(this).animate({opacity: 1.0}, 300);
        });
    });