添加:: after伪元素后，锚链接不起作用

Question

我在图片上添加了一个锚点，但是它不起作用。当我将鼠标悬停在图片的开头时，只能看到锚点，但是之后光标是默认的。当使用:: after元素时，不能包含锚点还是我想念什么？任何帮助将不胜感激

section.galleryimage .col-md-4 figure {
  height: 235px;
  overflow: hidden;
  position: relative;
}

section.galleryimage .col-md-4 figure img {
  height: 100%;
  width: 100%;
}

section.galleryimage .col-md-4 figure:after {
  content: "\f067";
  font-family: fontawesome;
  position: absolute;
  height: 100%;
  width: 100%;
  background: rgba(41, 153, 195, 0.4);
  top: -100%;
  transition: 0.5s ease;
  color: #fff;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

section.galleryimage .col-md-4 figure:hover:after {
  top: 0%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<section class="galleryimage">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <figure>
          <a href="#">
            <img src="http://jpninfo.com/wp-content/uploads/2017/08/coin-laundry-700.jpg">
          </a>
        </figure>
      </div>
    </div>
  </div>
</section>