anchor link not working after adding ::after pseudo element

Question

I have added an anchor to the image but it is not working.When i hover on the image at beginning only anchor can be seen but after that the cursor is default.Can we not include anchor when we use ::after element or am i missing something?Any help would be kindly appreciated

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>

simply because the after you added is on the top so the link is under it — Temani Afif, Jul 04 '18 at 08:03
I got the fact that the link is under it how do i solve the problem?I've tried z-index but it doesnt work or maybe im using it in a wrong way — samana ghimire, Jul 04 '18 at 08:15
check the duplicate ;) all you have to do is to add `pointer-events:none` like described there: — Temani Afif, Jul 04 '18 at 08:16

anchor link not working after adding ::after pseudo element

0 Answers0