マウスホバーして変化した画像にリンクをつけたい

前提・実現したいこと

画像にマウスホバーすると違う画像に変わり、その画像をクリックすると他のページにリンクさせたい。

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

クリックしても他のページにリンクしない

該当のソースコード

(HTML)

(CSS)
.btn1 {
position: relative;
width: 574px;
height: 80px;
margin: 0 auto;
margin-bottom: 10px;
display: block;
overflow: hidden;
cursor: pointer;
}
.btn1 img {
position: absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
display: block;
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
.btn1:hover img:nth-of-type(2) {
opacity: 0;
}

試したこと

リンク画像の順番を上下変えた。→変わらず
リンク画像を入れ替た。　　→変わらず
marginを削除して、リンクするか試した。　→変わらず

.botn imgの部分を削除した、→他のページへのリンクはできるが、画像は変化後の画像のままになる。

補足情報（FW/ツールのバージョンなど）

windows10 　churome

行動規範の内容に同意します

回答1件

ベストアンサー

一例です。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        img {
10            position:absolute;
11            top:0;
12            cursor: pointer;
13        }
14
15        .target:hover {
16            display: none;
17        }
18
19    </style>
20</head>
21
22<body>
23<a href="https://teratail.com/">
24    <img src="https://dummyimage.com/600x400/0009ff/fff&text=hover中" alt="">
25</a>
26    <img class="target" src="https://dummyimage.com/600x400/0009ff/fff&text=hover" alt="">
27
28
29</body>
30
31</html>