如何确定点击区域应该在哪里

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