'I tried to create a nav tag where if you hover over the icons, the title or a content attached appears. but the timing in transition isn't working

  .home-link::after, .contact-link::after, .about-link::after {
    font-size: 2rem;
    text-align: center;
    position: absolute;
    margin-left: -3rem;
    bottom: 0rem;
    transition: all .8s ease-in-out;
}



.home-link:hover::after{
    content: "Home";
    
}

.about-link:hover::after{
    content: "About";
}

.contact-link:hover::after{
    content: "Contact";
}

from the above code, i;m trying to write a code whereby when one hover on my home icon, about or contact icon, the contents above becomes visible with a 0.8s transition. here the content appears when I hover on the icons but it,s not taking 0.8s to transition.

htmlcssreactjs


Solution 1:[1]

.home-link::after{
    content: "Home";
    font-size: 2rem;
    text-align: center;
    position: absolute;
    margin-left: -3rem;
    bottom: 0rem;
    transition: all .8s ease-in-out;
    opacity:0;
}
.home-link:hover::after{
    opacity: 1;
}

if you want your text to slowly fade in you have to use opacity, otherwise the browser will have nothing to work with

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shihab Munshi

Related Questions