I need help with creating clickable images inside list items (<li>). Currently, only the bottom half of the image is clickable. I've tried different approaches and explored jquery solutions, but I'm looking to achieve this using pure CSS.
<div class="link">
<ul>
<li>
<a href="url">
<img src="image">
</a>
</li>
</ul>
</div>
.link {
white-space: nowrap;
text-align:center;
}
.link li {
max-width: 23.3%;
display: inline-block;
text-align: center;
vertical-align: middle;
}
.link img {
max-width:100%;
}