css図形へのタグ挿入

問題点
cssで三角形を作成し、hoverで拡大、aタグの表示を設定したところaタグにカーソルを持っていくと拡大しなくなる

html
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <link rel="stylesheet" href="stylesheet.css">
5    <meta charset="utf-8">
6    <title></title>
7  </head>
8  <body>
9    <div class="wrap">
10    <div class="triangle"><a href="#"></a></div>
11    <div class="text">
12    <p>top</p>
13    </div>
14    </div>
15    <map>
16      <area shape="poly" coords="" href="#" alt="">
17    </map>
18  </body>
19</html>

css
1.wrap{
2  position: relative;
3}
4
5.triangle{
6  display: block;
7  border-right: 50px solid transparent;
8  border-bottom: 86.6025px solid rgb(76,175,80,0.7);
9  border-left: 50px solid transparent;
10  width: 0;
11 height: 0;
12 top: 0;
13 right: 0;
14 bottom: 0;
15 left: 0;
16 margin: auto;
17}
18
19.triangle:hover{
20  transform: scale(1.2);
21  transition-duration: 0.3s;
22  display: block;
23}
24
25.text{
26  position: absolute;
27  top: 0;
28  right: 0;
29  bottom: 0;
30  left: 0;
31  margin: auto;
32  text-align: center;
33  height:44%;
34  display: none;
35}
36
37.triangle:hover ~ .text{
38display:block;
39cursor: pointer;
40}

解決方法の予想
aタグにもhoverで拡大をせっていすればいいのでは、と考えたのですがそのやり方がわかりません。

教えていただきたいこと
aタグhover時に三角形にtransform指定。
これよりいい解決方法がありましたらそちらを教えてください。

よろしくお願いします。

追記

html
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <link rel="stylesheet" href="stylesheet.css">
5    <meta charset="utf-8">
6    <title></title>
7  </head>
8  <body>
9    <div class="container">
10    <a class="triangle" href="#"></a>
11    <div class="text">
12      top
13    </div>
14    </div>
15  </body>
16</html>

css
1/*変更点*/
2.container{
3  display:flex;
4  width:100%;
5  justify-content: center;
6  position: absolute;
7  top: 50%;
8  left: 50%;
9  transform: translate(-50%, -50%);
10}
11/*変更点終了*/
12
13.triangle{
14  display: block;
15  border-right: 50px solid transparent;
16  border-bottom: 86.6025px solid rgb(76,175,80,0.5);
17  border-left: 50px solid transparent;
18  width: 0;
19 height: 0;
20 top: 0;
21 right: 0;
22 bottom: 0;
23 left: 0;
24 margin: auto;
25}
26
27.triangle:hover{
28  transform: scale(1.2);
29  transition-duration: 0.3s;
30  display: block;
31}
32
33.text{
34  width:100%;
35  display: none;
36  position: absolute;
37  top: 0;
38  right: 0;
39  bottom: 0;
40  left: 0;
41  margin: auto;
42  text-align: center;
43  height:44%;
44}
45a{
46  text-decoration: none;
47}
48.triangle:hover~.text{
49  display: block;
50}
51