quickTest

by individual11

HTML

<script src="http://individual11.com/lib/placehold.it.min.js"></script>
<article class="box">
    <div class="artSmall">
        <a href="#!/1">
            <img />
            <h2>Birds</h2><br />
        </a>    
        <span>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</span> 
    </div>
</article>

CSS

a{
  text-decoration:none;   
}
article{
    width: 178px;
    margin: 0 4px 4px 0;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid black;
    padding: 4px;
}

article h2, article span{
    display: inline;
    color:black;
    background: #fbf9f4;
}
article span{
    font-size: 11px;
    line-height: 10px;
    padding: 2px 0 2px 0;
}
article .artSmall{
    color: red;
    width:170px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 5px;
}
article img{
    width:170px;
    height:170px;
    overflow: hidden;/*just in case*/
    background:black;
    border: none;
}

article a{
/*     display:none; */
}
article a:hover h2{
    color: #fbf9f4;
    background:black;
}

JavaScript

$(function(){
 $('img').placeholdit();   
});