So we’ve probably all come across that situation where we have a nice list of articles, or images with descriptions that we want to make clickable.

Often we see developers wrap an anchor tag around the image, and another one around the text.. take this fairly standard example:

<div class="list-item">
 <div class="item-img">
 <a href="#"><img src="myimage.jpg"></a>
 </div>

 <div class="item-text">
 <a href="#">Check out this awesome article about cats!</a>
 </div>
</div>

That looks great, but there are a couple of issues:

  • You have to create two anchor tags
  • You probably have to fix some CSS to make sure there are no borders, or horrible underlines
  • It doesn’t make the whole element clickable..

But alas there is a way.. and a very easy way..

The HTML

<div class="list-item">
 <div class="item-img">
 <img src="myimage.jpg">
 </div>

 <div class="item-text">
 Check out this awesome article about cats!
 </div>
 
 <a href="#" class="block-link">read full article</a>
</div>

The CSS


.list-item {
	position:relative;
}
.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;
}

How it works

So, what we do is position the list item relative (this should not effect your design.. if you already have a position set then you can ignore this rule). We then position the anchor (link) absolute to the list item, stretching it across the whole element making it all clickable.

  • z-index is to position the link higher than theĀ other sibling elements, if you have a z-index defined on your siblings then you may need to increase this
  • background image is a base64 encoded transparent 1×1 pixel png, this fixes an issue in older version of IE.
  • text-indent minus’d off the screen makes the text “read full article” disappear, because we don’t want some random text floating around.

The Demo