画像リンクをマウスオーバーで透過画像を重ねる方法

質問

複数の画像リンクをマウスオーバー時に決まった画像を重ねて表示させたいのですが分かりません。
ご教授頂けないでしょうか。

画像リンクの上にマウスが乗った時に虫眼鏡や再生ボタンが表示される
みたいな事がしたいのです。

自分なりに調べた結果画像を上に重ねるところまでは分かったのですが、重なった時点で画像リンクが無効になってしまいます。
方法としては

<p class="figure" id="jpg01">
　　<a href="リンク先" target="_blank"><img src="画像" width="300" height="150" alt=""></a>
</p>

p.figure{position:relative;}
p.figure:after{position:absolute;bottom:0;left:0;}
p#jpg01:hover:after{content:url(重ねる画像.png);}

としているのですがリンク先に飛ぶことができません。
　<a href="リンク先" target="_blank"><p class="figure" id="jpg01">
　<img src="画像" width="300" height="150" alt="">
</p></a>

とすれば上手くいったのですが不格好な気がします。

ちなみに画像リンクに使いたい画像もそれに重ねたい画像も同じサイズです。

どうかよろしくお願いします。

回答No.3

warez

aに擬似要素を適用させてやればいけそうな気がします。

p.figure a {
position: relative;
}
p#jpg01 a:hover:after {
content: url(重ねる画像.png);
position: absolute;
bottom: 0;
left: 0;
}

回答No.2

ORUKA1951

figureと言うclass名は、「本文から単独で参照されることの多い、自己完結した内容を表します。」を示すのですが？？？
　複数のリンク先があるのでしたらHTMLは単に
<div class="nav">
　<ul>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　　<li><a href=""></a></li>
　</ul>
</div>
　とかじゃないのですか？？
　そのうえで、リンクを画像の上に配置して、マウスオーバー時にアイコンを表示させるほうがはるかに楽です。
　もう少し具体的なHTML（デザインはまったく無視して）を示してください。そのほうがスタイルシート核の楽ですし、先で変更も自在にできる。

★画像は内容を持ち得ない要素ですから、内容の追加contentは使えません。

回答No.1

ONEONE

ためしてませんが、pに:afterするとリンクが効かなくなるので、
imgに:afterを指定してやればいいのでは？