<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>
.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; }