effect of focus on Display

by Faisal Khan Janjua

HTML

<form action="">
    <label for="box">I am a label</label>
    <input type="text" name="box" id="box">
</form>

CSS

form label {
    font-size: 23px;
}

#box {
    width: 0px;
    visibility: hidden;
    opacity: 0;
    
    -webkit-transition: 2000ms;
    -moz-transition: 2000ms;
    -ms-transition: 2000ms;
    -o-transition: 2000ms;
    transition: 2000ms;        
}

#box:hover{
    visibility: visible;
    opacity: 1;    
    width: 500px;
}