Simple CSS Image Hover Question

I'm having problems implementing this code onto my site http://www.some-things.net/category/work/

http://www.sohtanaka.com/web-design/css-on-hover-image-captions/

Can anyone see where I'm going wrong? I've got it working in coda - but when I try implement it into wordpress, something breaks.

    <div style="clear:both"></div>
        <div class="gallery">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <d开发者_开发技巧iv class="portfolioItem">
                        <a href="<?php the_permalink() ?>" title="<?php the_title();?>"><?php the_post_thumbnail(); ?></a>
                <span class="desctitle"><h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
</span> </div>
<?php endwhile; ?>
</div>

And here is the CSS:

    .portfolio {overflow:hidden;}
.gallery {
    margin-top:10px;
    padding-left:22px;
    margin-left:-22px;
    margin-bottom:20px;
    width:982px;
}

/* .portfolioItem {
    float:left;
    width:300px;
    margin-right:25px;
    overflow:hidden;
    margin-bottom:5px;
} */

.portfolioItem {
    float: left;
    overflow: hidden;
    position: relative;
    margin-right: 25px;
    margin-bottom: 5px;
}



.portfolioItem a {
    text-decoration: none;
    float: left;
}
.portfolioItem a:hover {
    cursor: pointer;
}



 /* .portfolioItem img {
    border:2px;
    border-color:000;
    border-style:solid; */
    /* border:none; */
    /* opacity:0.6;filter:alpha(opacity=60);} */


/* .gallery .portfolioItem img:hover {
opacity:1;filter:alpha(opacity=100);}
*/  


.portfolioItem a img {
    float: left;
    margin: 0;
    border: none;

}



/* boxes for portfolio item descriptions */


.portfolioItem a:hover .desctitle {
    display: block;
    font-size: 1.2em;
    padding: 0px 0;
    background: #111;
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
    color: #fff;
    position: absolute;
    bottom: 0px;
    margin: 0;
    width: 300px;
    border-top: 1px solid #999;

}


/* .desctitle a {
    color:white;
    padding-left:12px;

    }
*/


.portfolioItem a .desctitle {   display: none; }

It turned out to be a formatting error - the / linking was all wrong. This is the correct code for anyone else with a similar problem...

    <div style="clear:both"></div>
        <div class="gallery">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div class="portfolioItem">
                        <a href="<?php the_permalink() ?>" class="desctitle" title="<?php the_title();?>"><?php the_post_thumbnail(); ?>
                <span class="desctitle"><?php the_title(); ?></a>
</span>                     

                    </div>

            <?php endwhile; ?>
        </div>