title: How to decide where the click area should be
body: <p>I am creating some thumbnails for my portfolio and wonder if someone can assist me in getting the whole dotted are clickable instead of the "view project" button. Same result for large,medium and small view ports. </p>
  
  <p>I have attached an image and also the code that I am using</p>
  
  <p>Thank you.</p>
  
  <p>See final result here:</p>
  
  <p><img src="https://i.stack.imgur.com/NQ3gj.jpg" alt="Se final result here"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){$("#navi a").on("click",function(a){a.preventDefault,$("ul.grid").removeClass().addClass("grid").addClass($(this).attr("data-value"))})});</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.grid figure {
      margin: 0;
      position: relative
  }
  
  .grid figure img {
      max-width: 100%;
      display: block;
      position: relative
  }
  
  .grid figcaption {
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px;
      background: #2c3f52;
      color: #b2b2b2
  }
  
  .grid figcaption h4 {
      margin: 0;
      padding: 0;
      color: #fff
  }
  
  .grid figcaption a {
      text-align: center;
      font-weight: 500;
      padding: 10px 20px;
      border-radius: 2px;
      display: inline-block;
      background: #d5dee8;
      color: #000
  }
  
  .cs-style-1 figcaption {
      height: 100%;
      width: 100%;
      opacity: 0;
      text-align: center;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transition: -webkit-transform .3s, opacity .3s;
      -moz-transition: -moz-transform .3s, opacity .3s;
      transition: transform .3s, opacity .3s
  }
  
  .cs-style-1 figure:hover figcaption,
  .no-touch .cs-style-1 figure:hover figcaption {
      opacity: 1;
      -webkit-transform: translate(15px, 15px);
      -moz-transform: translate(15px, 15px);
      -ms-transform: translate(15px, 15px);
      transform: translate(15px, 15px)
  }
  
  .cs-style-1 figcaption h4 {
      margin-top: 12%
  }
  
  .cs-style-1 figcaption span {
      display: block
  }
  
  .cs-style-1 figcaption a {
      margin-top: 20px
  }
  
  @media screen and (max-width:31.5em) {
      .grid {
          padding: 10px 10px 100px
      }
      #navi,
      .grid li {
          width: 100%;
          min-width: 300px
      }
  }
  
  *,
  :after,
  :before {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p. class="grid cs-style-1"&gt;
  &lt;figure&gt;
  &lt;img src="https://dribbble.s3.amazonaws.com/users/131151/screenshots/1115960/iosicons_drb2_1x.png" alt="img01" /&gt;
  &lt;figcaption&gt;
  &lt;h4&gt;Changi&lt;/h4&gt;
  &lt;span&gt;Art Direction&lt;/span&gt;
  &lt;a href="https://google.com"&gt;View project&lt;/a&gt;
  &lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>