title: How to make an entire square div clickable with CSS?
body: <p>I'm working on this demo : <a href="http://jsfiddle.net/hjkryc41/1/" rel="nofollow">http://jsfiddle.net/hjkryc41/1/</a></p>
  
  <p>It's about a responsive grid in CSS in an horizontal scrolling page. There are several square divs stacked from top to bottom, and left to right. Each square contains a link, a picture and a title. </p>
  
  <p>Here is the HTML :</p>
  
  <pre><code>&lt;div class="masonry"&gt; 
  
  &lt;div class="item"&gt;&lt;a href="http://arkhana.fr/img/2.png"&gt;&lt;img src="http://arkhana.fr/img/2.png" /&gt;&lt;/a&gt;&lt;div class="title"&gt;test2&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;a href="http://arkhana.fr/img/2.png"&gt;&lt;img src="http://arkhana.fr/img/2.png" /&gt;&lt;/a&gt;&lt;div class="title"&gt;test2&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;a href="http://arkhana.fr/img/3.png"&gt;&lt;img src="http://arkhana.fr/img/3.png" /&gt;&lt;/a&gt;&lt;div class="title"&gt;test3&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;a href="http://arkhana.fr/img/4.png"&gt;&lt;img src="http://arkhana.fr/img/4.png" /&gt;&lt;/a&gt;&lt;div class="title"&gt;test4&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;a href="http://arkhana.fr/img/5.png"&gt;&lt;img src="http://arkhana.fr/img/5.png" /&gt;&lt;/a&gt;&lt;div class="title"&gt;test5&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;a href="http://arkhana.fr/img/6.png"&gt;&lt;img src="http://arkhana.fr/img/6.png" /&gt;&lt;/a&gt;&lt;div class="title"&gt;test6&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;a href="http://arkhana.fr/img/7.png"&gt;&lt;img src="http://arkhana.fr/img/7.png" /&gt;&lt;/a&gt;&lt;div class="title"&gt;test7&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;a href="http://arkhana.fr/img/8.png"&gt;&lt;img src="http://arkhana.fr/img/8.png" /&gt;&lt;/a&gt;&lt;div class="title"&gt;test8&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;a href="http://arkhana.fr/img/9.png"&gt;&lt;img src="http://arkhana.fr/img/9.png" /&gt;&lt;/a&gt;&lt;div class="title"&gt;test9&lt;/div&gt;&lt;/div&gt;
  &lt;div class="item"&gt;&lt;a href="http://arkhana.fr/img/10.png"&gt;&lt;img src="http://arkhana.fr/img/10.png" /&gt;&lt;/a&gt;&lt;div class="title"&gt;test10&lt;/div&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the CSS :</p>
  
  <pre><code>body {
      margin: 0;
      background: #e9e9e9;
      height:100%;
      padding:1em;
  }
  .masonry {
      position:absolute;
      height:auto;
      top:0px;
      bottom:0px;
      margin: 0;
      padding: 20px;
      -moz-column-gap: 1em;
      -webkit-column-gap: 1em;
      column-gap: 1em;
      -moz-column-width: 220px;
      -webkit-column-width: 220px;
      column-width: 220px;
  }
  .item {
      width:100%;
      display: block;
      position:relative;
      margin: 0 0 1.5em;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
  }
  .item img {
      width:100%;
  }
  .title {
      background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.8));
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 4em 1em 1em 1em;
      color:white;
      font-family:'open sans';
      font-weight:100;
      font-size:16px;
      line-height:25px;
      text-align:right;
  }
  </code></pre>
  
  <p>I would like to make each square entirely clickable. The problem is that the squares are not clickable in the title zone.</p>
  
  <p>Is it possible to make the squares entirely clickable without including a second link in the div ?</p>