在图像悬停时显示文本不起作用 - CSS/HTML

Question

当用户将光标移动到徽标上时，我希望文本显示在徽标的右侧。我检查了其他类似的问题，并尝试了他们的解决方案，但仍然不起作用。当我将鼠标悬停在徽标上时，什么也不会显示。当我检查检查器时，浏览器似乎没有读取悬停效果。它仍然读取CCD_ 1和CCD_。

.logo {
display: block;
width: 90px;
}
.puneet-name {
position: absolute;
visibility: hidden;
opacity: 0;
transition: opacity .2s, visibility .2s;
}
.logo img:hover .puneet-name {
visibility: visible;
opacity: 1;
}
.header_menu {
padding: 25px 0;
z-index: 12;
margin-right: 2px;
margin-left: 0.1px;
}

<div class="header_menu row d-flex align-items-center justify-content-between">
<a class="logo" href="#">
<img src="images/PS_logo.png" alt="logo"/>
</a>
<div class="hover-text lineHeading">Person Name</div>
</div>

Answer 1

将鼠标悬停在图像上时将显示文本

.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.hover-text {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .hover-text {
opacity: 1;
}

<div class="container">
<a class="logo" href="#">
<img src="images/PS_logo.png" alt="logo" class="image"/>
</a>
<div class="hover-text">
<div class="text">Person Name</div>
</div>
</div>