Block Links

How to Turn the whole element into a clickable link - http://chubbyninja.co.uk

by Danny Hearnah

HTML

<div class="list-item">
    <div class="item-img">
        <img src="http://placekitten.com/150/150" />
    </div>
    <div class="item-text">Check out this awesome article about cats!</div> <a href="http://www.chubbyninja.co.uk/how-to-turn-the-whole-element-into-a-clickable-link" class="block-link">read full article</a>

</div>


<div class="list-item">
    <div class="item-img">
        <img src="http://www.lorempixum.com/150/150" />
    </div>
    <div class="item-text">Look at all this stuff!</div> <a href="http://www.chubbyninja.co.uk/how-to-turn-the-whole-element-into-a-clickable-link" class="block-link">read full article</a>

</div>

CSS

.list-item {
    position:relative;
    width:150px;
    padding:10px;
    border:solid 1px #000;
    float:left;
    margin-right:10px;
    height:210px;
}
.block-link {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    /* must be higher than content and corners */
    background-image: url(data:image/png;
    base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDYvMTYvMTPlFMTNAAAADUlEQVQImWP4//8/AwAI/AL+hc2rNAAAAABJRU5ErkJggg==);
    text-indent:-9999px;
}