JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumb">
 <a href="#"><img src="http://4.bp.blogspot.com/-ekz67FY3QaA/TbZoxbVKTiI/AAAAAAAAAbM/QfjWUVU4kmc/s1600/bird.jpg" width="250" height="224"/></a>
    <div class="title">
        <h1 class="din"><a href="#">TITLE HERE</a></h1>
        <h2><a href="#">Branding, Print, Web</a></h2>
        <h2><a href="#">2011</a></h2>
    </div>
</div>

CSS

.thumb {float: left; background-color: #FFF; z-index: 1; width: 250px; height: 225px; margin-right: 27px; margin-bottom: 45px; display: inline-block; *display:inline; *zoom: 1; position: relative;}
.thumb .title{position:absolute; width: 250px;  top: 40%; left:0%; text-align: center; display: none; z-index: -1;}
.thumb:hover .title{display: inline; z-index: 1;}
.thumb .title h1{color:#00F;}

JavaScript

$(document).ready(function() {
    $(".thumb img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 60% when the page loads
    $(".thumb").hover(function() {
        $('img', this).fadeTo("slow", 0.3); // This should set the opacity to 100% on hover
    }, function() {
        $('img', this).fadeTo("slow", 1.0); // This should set the opacity back to 60% on mouseout
    });


});