ホバーで画像を3D回転させるとリンクが効かなくなる

Question

前提

表と裏に画像を配置したカードを、ホバーで回転させ、
裏の画像クリックで同じページ内の指定の場所（アンカーリンク）に移動したい。

実現したいこと

【ＰＣ表示の時】
表の画像 → [ホバー] → 裏の画像 → [クリック] → 同じページ内の指定の場所（アンカーリンク）に移動。
【スマホ表示の時】
表の画像 → [タップ] → 同じページ内の指定の場所（アンカーリンク）に移動。

PCの場合とスマホの場合のリンク先は同一。

発生している問題・エラーメッセージ

スマホ表示ではリンク先に飛べますが、ＰＣ表示ではクリックができません。
表の画像にはリンクがついているが、ホバーで回転して裏になるとリンクが出来なくなる状態で困っています。
どの様に記述を変えれば良いでしょうか。

該当のソースコード

  <div class="member">
    <img src="画像①(オモテ)" />
    <a href="/ＵＲＬ#アンカーリンク">
    </a>
    <img src="画像②(ウラ)" />
  </div>

.member {
  width: 165px;
  height: 165px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: 1s;
}
.member img{
  position: absolute;
  width: 100%;
  backface-visibility: hidden;
  top: 0;
  left: 0;
}
.member:hover{
  transform: rotateY( 180deg );
}
.member img:last-child{
  transform: rotateY( 180deg );
}
.member a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}

試したこと

<a href="/ＵＲＬ#アンカーリンク">の記述位置を変えたり、色々とネットで調べたものを試したりしましたが、
位置を変えると裏の画像が出なくなったりして上手くいきません。
「CODEPEN」で紹介されている記述を入れてみても、レイアウトが崩れてうまくいきません。

補足情報

『JIMDO クリエイター』でWEBサイトを作成していて、
HTMLは「新規コンテンツ」の「ウィジェット/HTML」に記入し、
CSSは「ヘッダー編集」という部分に記入しています。
「ヘッダー編集」にはJavaScriptの記入も可能です。

Answer 1

  <div class="member">
    <img src="画像①(オモテ)" />
    <a href="/ＵＲＬ#アンカーリンク">
    </a>
    <img src="画像②(ウラ)" />
  </div>

この場合、divの中には子要素に対応する3つのレイヤーが生成されて、それらの描画順序は子要素の順番と同じになります。よって、ウラ画像のレイヤーが一番手前に描画され、リンクは見えていないことになります。
リンクを最後の子要素にするか、z-index プロパティでリンクを手前に描画しましょう。

Comments

[DYR]

早急で明確に教えて頂き、ありがとうございます！！
何日も悩んでいましたが、頂いた回答のz-indexで上手くリンクできるようになりました！！！
大変勉強になりました！そして、とても助かりました！