What's the exact bug with my CSS hovering code?-CodePudding

In my social media icons project, I tried hiding my text using opacity 0. When a user will mouse hover on my tag or icons the text will be shown. but my hover transition doesn't work. Please at first try using opacity 1 in my CSS in .icon. enter image description here.Please solve my hovering problem. I can't understand what's the bug

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(235, 219, 222);
    font-family: 'Poppins', sans-serif;
}
.wrapper {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

a {
    position: relative;
    display: block;
    width: 57px;
    height: 57px;
    background-color: #fff;
    text-decoration: none;
    font-size: 22px;
    margin: 10px;
    border-radius: 50%;
    text-align: center;
    line-height: 57px;
    color: black;
    transition: 0.4s;
}





.icon {
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    margin: 5px;
    padding: 10px;
    transition: 0.4s;;
    opacity: 0;
}
.icon_holder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon::before {
    content: '';
    position: absolute;
    display: block;
    width: 13px;
    height: 13px;
    background-color: #fff;
    top:83% ;
    left:42% ;
    transform: rotate(45deg);
    transition: 0.4s;

}
.wrapper>.icon_holder:nth-child(1)>a:hover .wrapper>.icon_holder:nth-child(1)>.icon{
    opacity: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
    <div >
        <div >
            <div >Facebook</div>
            <a href="#" ><i ></i></a>
        </div>
        <div >
            <div >Twitter</div>
            <a href="#" ><i ></i></a>
        </div>
        <div >
            <div >Instagram</div>
            <a href="#" ><i ></i></a>
    
        </div>
        <div >
            <div >Reddit</div>
            <a href="#" ><i ></i></a>
        </div>
        <div >
            <div >Youtube</div>
            <a href="#" ><i ></i></a>
        </div>








    </div>
    
</body>
</html>

Please help me.

CodePudding user response：

Your hover rule is wrong and won't trigger, replace it with:

.wrapper .icon_holder:hover .icon {
   opacity: 1;
}

Working example:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(235, 219, 222);
    font-family: 'Poppins', sans-serif;
}
.wrapper {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

a {
    position: relative;
    display: block;
    width: 57px;
    height: 57px;
    background-color: #fff;
    text-decoration: none;
    font-size: 22px;
    margin: 10px;
    border-radius: 50%;
    text-align: center;
    line-height: 57px;
    color: black;
    transition: 0.4s;
}





.icon {
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    margin: 5px;
    padding: 10px;
    transition: 0.4s;;
    opacity: 0;
}
.icon_holder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.icon::before {
    content: '';
    position: absolute;
    display: block;
    width: 13px;
    height: 13px;
    background-color: #fff;
    top:83% ;
    left:42% ;
    transform: rotate(45deg);
    transition: 0.4s;

}
.wrapper .icon_holder:hover .icon {
    opacity: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
</head>
<body>
    <div >
        <div >
            <div >Facebook</div>
            <a href="#" ><i ></i></a>
        </div>
        <div >
            <div >Twitter</div>
            <a href="#" ><i ></i></a>
        </div>
        <div >
            <div >Instagram</div>
            <a href="#" ><i ></i></a>
    
        </div>
        <div >
            <div >Reddit</div>
            <a href="#" ><i ></i></a>
        </div>
        <div >
            <div >Youtube</div>
            <a href="#" ><i ></i></a>
        </div>








    </div>
    
</body>
</html>

CodePudding user response：

you have an error on the CSS :

.icon {
    position: relative;
    background-color: #fff;
    border-radius: 5px;
    margin: 5px;
    padding: 10px;
    **transition: 0.4s;;**
    opacity: 0;
}

There is an extra semicolon at the transition line, a small typo error..