I have some images inside of an `<li>` that I am wanting to make a link. Only the bottom half of the image is clickable. I have tried different structures and looked into jquery solutions, but want to keep it 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%;
}

```