isotope test #2

HTML

<script src="http://attic.ryantroyford.com/isotope/js/jquery.isotope.min.js"></script>
<link rel="stylesheet" href="http://attic.ryantroyford.com/isotope/css/isotope.css">
<body>

  <div id="wrap">
    <header>
      <a href="#" id="logo" data-filter="*"></a>
      <div id="nav">
        <ul id="filters">
          <li><a href="#" data-filter=".design">design</a></li>
          <li><a href="#" data-filter=".animation">animation</a></li>
          <li><a href="#" data-filter=".experiment">experiments</a></li>
        </ul>
      </div>
    </header>
    <section id="container">
      
      <div class="brick design" id="brick1">
        <p id="appear1" class="appear">
          <span class="projectTitle">project</span>
          <span class="projectDesc">here is the extra text that should show up when hovered upon</span>
          <a href="#">view project</a>
        </p>
      </div>
      
      <div class="brick animation" id="brick2"></div>
      <div class="brick design" id="brick3"></div>
      <div class="brick animation" id="brick4"></div>
      <div class="brick design" id="brick5"></div>
      <div class="brick experiment" id="brick6"></div>
      <div class="brick experiment" id="brick7"></div>
      
      <div class="corner-stamp" id="stamp">corner stamp, yo</div>
            
    </section>
    <footer>
      copyright 2011 &nbsp; ryan troy ford &nbsp; &middot; &nbsp; all rights reserved
    </footer>
  </div>

CSS

body{
  font-family: arial;
}

#wrap{
  width:800px;
  margin:0px auto 0px auto;
}

header{
  height:116px;
  width:100%;
  border-bottom: 1px solid #666;
  font-family: 'BebasRegular';
  padding:0px 5px 0px 5px;
}
  
  header #logo{
    width:311px;
    height:116px;
    display:block;
    background-image: url(logo-comp.jpg);
    float:left;
    background-position:top;
  }
  
  header #logo:hover{
    background-position:bottom;
  }

  header #nav{
    font-size:17px;
    float:right;
  }
  
    header #nav ul{
      margin-top:40px;
    }
    
      header #nav li{
        display:inline;
        margin-left:80px;
      }
    
        header #nav li a{
          text-decoration: none;
          color:#666;
        }
      
        header #nav li a:hover{
          color:#ccc;
        }
        
#container{
  padding-top:5px;
  padding-bottom:5px;
}
      
footer{
  width:100%;
  border-top:1px solid #666;
  font-family: 'BebasRegular';
  text-align:center;
  font-size:12px;
  color:#ccc;
  padding:6px;
}

/* ------------------- FONTS ---------------------- */

@font-face {
    font-family: 'BebasRegular';
    src: url('fonts/bebas___-webfont.eot');
    src: url('fonts/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/bebas___-webfont.woff') format('woff'),
         url('fonts/bebas___-webfont.ttf') format('truetype'),
         url('fonts/bebas___-webfont.svg#BebasRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ----------------- ROLLOVER PROJECT DESCRIPTION STYLES -------------------*/


.appear{
  opacity: 0;
  width:100%;
  height:100%;
}

.appear a{
  padding:10px;
  color:#666;
}
.appear a:hover{
  color:#999;
}
.projectDesc{
  padding:10px;
  display:block;
}
.projectTitle{
  font-weight:bold;
  font-size:30px;
  display:block;
  padding:10px;
}

/* ------------------- BRICKS ---------------------- */

#stamp{
  margin:5px;
  padding:10px;
  width:250px;
  height:320px;
 ...

JavaScript

$(function(){
      
      var $container = $('#container');
      
      $container.isotope({
        itemSelector: '.brick',
        
        masonry: {
         columnWidth: 250,
         cornerStampSelector: '.corner-stamp'
        }
      });
      
      // filter items when filter link is clicked
      $('header a').click(function(){
        var selector = $(this).attr('data-filter');
        $container.isotope({ filter: selector });
        return false;
      });
    });


$("document").ready(function() {
    $(".appear").hover(function() {
        $(this).animate({
            opacity: .9,
            borderTopRightRadius: 30,
            WebkitBorderTopRightRadius: 30,
        }, 400);
    }, function() {
        $(this).animate({
            opacity: 0,
            borderTopRightRadius: 0,
            WebkitBorderTopRightRadius: 0,
        }, 500);
    });

    $(".brick").hover(function() {
        $(this).animate({
            borderTopRightRadius: 30,
            WebkitBorderTopRightRadius: 30,
        }, 400);
    }, function() {
        $(this).animate({
            borderTopRightRadius: 0,
            WebkitBorderTopRightRadius: 0,
        }, 500);
    });
});