When I hover over the text, it is clickable. But I want to make the whole shape clickable. I tried but it's going outside the shape. How can we make the shape (only within the shape) clickable? Here's the code I tried. What should I do to make the whole shape clickable? Can anyone please help me with this?
* { box-sizing: border-box; } .diamond { position: relative; height: 120px; width: 120px; text-align: center; z-index: 1; display: inline; float: right; font-family: Helvetica; color: #ffffff; FONT-SIZE: 13PX; FONT-WEIGHT: 600; } .diamond:after { position: absolute; background-color: #ef1717; top: 10px; left: 10px; content: ''; height: calc(100% - 22px); width: calc(100% - 22px); border-radius: 18%; transform: rotateX(45deg) rotateZ(45deg); z-index: -1; } #diamond:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } a.int_link{ text-decoration: none; COLOR: #FFFF; FONT-WEIGHT: 700; font-family: Helvetica; }
<table style="width:99%;padding:5px;"> <tr> <td> <div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem...</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div> </td> <td> <a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem..</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a> </td> <td> <a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem..</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a> </td> <td> <a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem..</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a> </td> <td> <a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem..</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a> </td> <td> <a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="diamond" id="diamond"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a><div class="meet" style="margin-top:45px;"><a href=" " class="int_link" target="_blank" rel="noreferrer noopener">lorem..</a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a></div><a href=" " class="int_link" target="_blank" rel="noreferrer noopener"> </a> </td> </tr></table>
.changed{
position: relative;
height: 120px;
width: 120px;
text-align: center;
z-index: 1;
display: inline;
float: right;
font-family: Helvetica;
color: #ffffff;
FONT-SIZE: 13PX;
FONT-WEIGHT: 600;
}
.changed:after{
position: absolute;
background-color: green;
top: 10px;
left: 10px;
content: '';
height: calc(100% - 22px);
width: calc(100% - 22px);
border-radius: 18%;
transform: rotateX(45deg) rotateZ(45deg);
z-index: -1;
}
#changed:hover{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
<td>
<div class="changed" id="changed">
<a href=" " class="int_link" target="_blank" rel="noreferrer noopener">
<span style="display: block; position: relative; top: 1rem; left: 1rem; padding-top:32px; width: 87px; height: 81px;">Changed</span>
</a>
</div>
</td>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.