My links stopped working after I put " content: "" ; " in my scss code in react

Question

I need to add link to my image. I mean when ever I click my image it should redirect to perticular page. I tried to do it using Link tag (react-router-dom) but it is not working properly.

<div className="cate-images">
  <Link to={link}>
    <img src={image} />
  </Link>
</div>

.categories-items {
  position: relative;
  transition: $transition;
  .cate-images {
    a {
      cursor: pointer;
      img {
        box-shadow: 0 0 30px #eee;
        background: #fff;
        border-radius: 0 0 5px 5px;
        position: relative;
        transition: all 500ms ease;
        border-radius: 5px;
      }
    }
  }
  &:before {
    content: "";
    background: -moz-linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0) 50%);
    background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0) 50%);
    background: -webkit-linear-gradient(
      to top,
      #000000 0%,
      rgba(0, 0, 0, 0) 50%
    );
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 0;
    border-radius: 5px;
    transition: all 500ms ease;
    z-index: 1;
  }
  &:hover {
    transform: translateY(-10px);
  }
}