Make whole area clickable-CodePudding

There is link outside Image, want to make whole div area (image) clickable

<div class="desty_block">
<figure><img src="image"></figure>
<div class="detail">
<h3><a href="#">India</a></h3>
</div>
</div>

Tricked some css, but not covering whole area clickable.

.desty_block {position: relative;}

 .detail {
 position: absolute;
 top: 95px;
 left: 0;
 width: 100%;
 height: 100%;
 text-align: center;
 }

Note: After this post, did some dig and here is css

working example

.desty_block h3 {margin: 0 0 0px 0;}
.desty_block h3 a {
    color: #ffffff;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 100;
    padding-top: 7rem;
}
.desty_block{position: relative;}

Still doubt if it will work on all device ?

Any idea Thanks

CodePudding user response：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
  
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}
* {
  margin: 0;
}
html {
  padding: 20px;
  font: 12px/20px Arial, sans-serif;
}
div {
 
 
}
h1 {
  font: inherit;
  font-weight: bold;
}

#div6 {
  z-index: 3;
  position: absolute;
  top: 30%;
  left: 15%;
  width: 150px;
  
  border: 1px dashed #009;
  
  background-color: #ddf;
  text-align: center;
}

</style>
</head>
<body>

<h2>Card</h2>

<div class="card">
   
 <a href="http://google.com">
  <img src="https://icon-library.com/images/avatar-icon-images/avatar-icon-images-4.jpg" alt="Avatar" style="width:100%">
  <div id="div3">
    <div id="div6">
        <h1>Division Element #6</h1>
        <code>position: absolute;<br/>
        z-index: 3;</code>
      </div>
</a>
</div>
</div>

</body>
</html>

CodePudding user response：

Wrap the entire div with an anchor tag. Try the following (assuming the desty_block div contains image text):

<a href="#">
  <div class="desty_block">
    <figure><img src="image"></figure>
    <div class="detail">
      <h3>India</h3> 
    </div>
  </div>
</a>