Wie man entscheidet, wo der Klickbereich sein sollte

Question

Ich erstelle einige Thumbnails für mein Portfolio und frage mich, ob jemand mir helfen kann, das ganze punktierte anklickbare statt des "View Project" -Buttons zu bekommen. Gleiches Ergebnis für große, mittlere und kleine Ansichtsports.

Ich habe ein Bild angehängt und auch den Code, den ich verwende

Danke. hier

Endergebnis Siehe:

$(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> 

Und in Ihrem CSS, würden Sie diese Wähler .grid figcaption a mit diesem ändern müssen:

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