Why a particular section is not visible after hover?

I made a design where I want to show text section after hover on info icon. But It is not working after hover on info icon. Please help me. I could not able to find my problem in this code. But most probably I think the problem is in the hover section. But I could not able to fix it. Please help me to fix this problem.

*{
    margin: 0;
    padding: 0;
}
.hover1 {
    height: 500px;
    width: 700px;
    background: #00a8ff;
    margin: 10px auto;
    position: relative;
}

.icon-info{
    position: absolute;
    top: 150px;
    left: 500px;
    background: white;
    padding: 5px 11px;
    border-radius: 50%;
}

.text{
    height: 200px;
    width: 360px;
    background: white;
    position: relative;
    top: 150px;
    left: 130px;
    padding: 20px;
    border-radius: 13px;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
}

.text h3{
    font-size: 30px;
    margin: 20px 5px;
}

.text p{
    font-size: 18px;
}

/* hover */

.icon-info:hover .text{
    visibility: visible;
    opacity: 1;
    transition: .5s;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hover effect</title>
    <link rel="stylesheet" href="./hover.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
    <div class="hover1">
        <i class="fas fa-info icon-info"></i>
        <div class="text">
            <h3>This is Tittle</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur dolores quis enim facilis doloribus iste hic dolore cumque rerum, in earum omnis obcaecati blanditiis nostrum ab. Tempora officia voluptatibus ex!</p>
        </div>
    </div>
</body>
</html>

Solution

Just add a + in hover style as follow:

*{
    margin: 0;
    padding: 0;
}
.hover1 {
    height: 500px;
    width: 700px;
    background: #00a8ff;
    margin: 10px auto;
    position: relative;
}

.icon-info{
    position: absolute;
    top: 150px;
    left: 500px;
    background: white;
    padding: 5px 11px;
    border-radius: 50%;
    z-index:1;
}

.text{
    height: 200px;
    width: 360px;
    background: white;
    position: relative;
    top: 150px;
    left: 130px;
    padding: 20px;
    border-radius: 13px;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
}

.text h3{
    font-size: 30px;
    margin: 20px 5px;
}

.text p{
    font-size: 18px;
}

/* hover */

.icon-info:hover + .text{
    visibility: visible;
    opacity: 1;
    transition: .5s;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Hover effect</title>
    <link rel="stylesheet" href="./hover.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
    <div class="hover1">
        <i class="fas fa-info icon-info"></i>
        <div class="text">
            <h3>This is Tittle</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur dolores quis enim facilis doloribus iste hic dolore cumque rerum, in earum omnis obcaecati blanditiis nostrum ab. Tempora officia voluptatibus ex!</p>
        </div>
    </div>
</body>
</html>