Problem with anchor image source not displaying

Question

I can't see why the images on the <a> aren't displaying. What am I doing wrong?

<section class="group">
    <section id="projects" class="module">
        <h1 class="">To help you decide</h1>
        <article>
            <div class="portfolio-item">
                <a href="#"><img src="images/work-sample1.jpg" alt="" /></a>
                <p class="btn"><a href="#">See more</a></p>
            </div>
            <div class="portfolio-item">
                <a href="#"><img src="images/work-sample2.jpg" alt="" /></a>
                <p class="btn"><a href="#">See more</a></p>
            </div>
            <div class="portfolio-item">
                <a href="#"><img src="images/work-sample3.jpg" alt="" /></a>
                <p class="btn"><a href="#">See more</a></p>
            </div>
        </article>
    </section><!-- #projects -->

CSS

    #content .portfolio-item {
            width: 140px; 
            padding: 4px; 
            background: #eee; 
            text-align: center;
            float: left; 
            margin: 24px 7px 14px 7px;
            display: block;
            height: 80px;
    }
        #content .portfolio-item p.btn {
            margin: 0;
        }
        #content .portfolio-item p.btn a {
            display: block; width: 142px; height: 29px; padding: 7px 0 0 0;
            background: url();
            font-weight: bold; text-align: center; text-transform: uppercase;
            text-decoration: none;
        }