クリック領域を決める方法

Question

私は自分のポートフォリオ用のサムネイルをいくつか作成していますが、「プロジェクトの表示」ボタンではなく、ドットで囲まれた部分をクリック可能にするのに役立つ人かどうか疑問です。大、中、小のビューポートでも同じ結果が得られます。

私は画像とも私は

ありがとうを使用していたコードを添付しています。

ここで最終的な結果を参照してください：

$(function(){$("#navi a").on("click",function(a){a.preventDefault,$("ul.grid").removeClass().addClass("grid").addClass($(this).attr("data-value"))})});

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

<p. class="grid cs-style-1"> 
 
<figure> 
 
<img src="https://dribbble.s3.amazonaws.com/users/131151/screenshots/1115960/iosicons_drb2_1x.png" alt="img01" /> 
 
<figcaption> 
 
<h4>Changi</h4> 
 
<span>Art Direction</span> 
 
<a href="https://google.com">View project</a> 
 
</figcaption> 
 
</figure> 
 
</p>

Answer 1

<div class="grid cs-style-1"> 
    <a href="https://google.com"> 
     <figure> 
      <img src="https://dribbble.s3.amazonaws.com/users/131151/screenshots/1115960/iosicons_drb2_1x.png" alt="img01" /> 
      <figcaption> 
       <h4>Changi</h4> 
       <span>Art Direction</span> 
       <div class="button">View project</div> 
      </figcaption> 
     </figure> 
    </a> 
</div> 

そして、あなたのCSSに、あなたはこれで、このセレクタ.grid figcaption aを変更する必要がありますが：

.grid figcaption .button { 
    text-align: center; 
    font-weight: 500; 
    padding: 10px 20px; 
    border-radius: 2px; 
    display: inline-block; 
    background: #d5dee8; 
    color: #000; 
    border: none; 
}