How to CSS visibility works

I put my whole code in https://jsfiddle.net/xmbohx/kuaen74m/5/

Trying to toggle the profile picture to reveal the menu in it but cannot.

the html:

<div class="wrapper">
        <div class="header">
            <div class="header-menu">
                <div>
                    <div class="title">LOGG <span>Panel</span></div>
                </div>
                <div class="sidebar-btn">
                    <i class="fas fa-bars"></i>
                </div>
                <div class="action" onclick="menuToggle()">
                    <img src="img2.jpg">
                    <div class="propic">
                        <h3>My name <br><span>operator</span></h3>
                        <ul>
                            <li><a href="#"><i class="fas fa-user-edit"></i><span>Edit</span></a></li>
                            <li><a href="#"><i class="fas fa-envelope"></i><span>Message</span></a></li>
                            <li><a href="#"><i class="fas fa-sliders-h"></i><span>Setting</span></a></li>
                            <li><a href="#"><i class="fas fa-question-circle"></i><span>Help</span></a></li>
                            <li><a href="#"><i class="fas fa-sign-out-alt"></i><span>Logout</span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

the action class is :

.wrapper .header .header-menu .action .propic {       
position: absolute;
top: 120px;
right: -10px;
padding: 10px 20px;
background: #ffffff;
width: 200px;
box-sizing: 0 5px 25px rgba(0, 0, 0, 1);
border-radius: 15px;
transition: 0.5s;
    
visibility: hidden;
opacity: 0;    
}
    
.wrapper .header .header-menu .action .propic. active {visibility: visible;
opacity: 1;
}

Pls advise what missing in the code

Answer

Your problem is coming from the fact you have a css property overflow:hidden on the node with class name action

try replacing in your html with the following :

            <div class="action" onclick="menuToggle()">
                <div id="round">
                    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg">
                </div>
                <div class="propic">
                    <h3>My name <br><span>operator</span></h3>
                    <ul>
                        <li><a href="#"><i class="fas fa-user-edit"></i><span>Edit</span></a></li>
                        <li><a href="#"><i class="fas fa-envelope"></i><span>Message</span></a></li>
                        <li><a href="#"><i class="fas fa-sliders-h"></i><span>Setting</span></a></li>
                        <li><a href="#"><i class="fas fa-question-circle"></i><span>Help</span></a></li>
                        <li><a href="#"><i class="fas fa-sign-out-alt"></i><span>Logout</span></a></li>
                    </ul>
                </div>
            </div>

and then modify this part of the css :

.wrapper .header .header-menu .action {
    position: relative;
    width: 34px;
    height: 34px;
    cursor: pointer;
}
.wrapper .header .header-menu .action #round {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow:hidden;
}

I nested the image in a new div, moved the overflow hidden property to this div, then it works.

fiddle