マウスオーバーで画像を拡大し、リンクもしたい

Question

https://kuzlog.com/2017/02/25/1168/

上記サイトを参考にし、マウスオーバーで画像を拡大し拡大後に「詳細を見る」と表示させたまではいけたのですが、その画像をクリックしても該当のページにリンクしません。
クリックしても、拡大後の状態で止まってしまいます。

他の箇所でリンクを貼るとちゃんと飛んだのでURL間違いではないようです。

どこかを改善すれば解決するでしょうか？
どなたかご教授いただけますでしょうか。

HTML

<div class="top2 clearfix">

<div class="imgWrap">
<div class="imgEff">
<a href="/shop/shop1"><img src="/img/top_shop1.png" class="" alt="A店"></a>
</div>
</div>

</div>

CSS

.top2 .imgEff img{
width:100%;
height:auto;
}
.top2 .imgWrap{
overflow:hidden;
}
.top2 .imgEff {
  position: relative;
  width: 100%;
hegiht:18vw;
  cursor: pointer;
  transition-duration: 0.3s;
}
.top2 .imgEff:before {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  content: "詳細を見る";
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(48, 13, 52, 0.6), black);
  color: #fff;
  font-size: 12px !important;
  letter-spacing: 2px;
  text-shadow: 0 0 2px #000;
  filter: blur(4px);
  transition-duration: 0.3s;
  opacity: 0;
}
.top2 .imgEff:hover {
  transform: scale(1.1);
}
.top2 .imgEff:hover:before {
  transform: scale(1.3);
  filter: blur(0);
  opacity: 1;
}

Answer 1

対象がdiv要素で、アンカー外だからでしょう。

.top2 .imgEff a:before {
}
.top2 .imgEff a:hover {
}

Comments

[heyhey...]

回答いただきありがとうございます。

仰るようにCSSを修正したのですが、リンクはするようになったのですが画像の拡大のエフェクトがなくなってしまいました。

.top2 .imgEff:before {
}
.top2 .imgEff:hover{
}

をそれぞれ
.top2 .imgEff a:before {
}
.top2 .imgEff a:hover {
}

に直したのですがこういうことではなかったのでしょうか。。

[heyhey...]

あ、できました！！
すみませんありがとうございました！！