Hello!
How to smoothly increase the block height:

.b-form__group--form-comment { border: 2px solid #000; padding-left: 14px; padding-right: 10px; background: #fff; } b-input--new-comment { display: block; width: 100%; resize: none; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; height: 56px; padding: 15px 10px 0 0; text-align: left; border: none; } .b-form__group--add-file { padding-bottom: 12px; opacity: 0; position: absolute; } .b-label--add-file { width: 100%; text-align: left; font-size: 12px; line-height: 18px; cursor: pointer; } .b-input--add-file[type=file] { display: none; } .b-form__group.b-form__group--form-comment:hover .b-form__group--add-file { opacity: 1; display: block; transition: max-height 0.25s ease-in; position: static; } 
 <div class="b-form__group b-form__group--form-comment"> <textarea placeholder="Type message…" class="b-input b-input--new-comment"></textarea> <div class="b-form__group b-form__group--add-file"> <label for="add-file" class="b-label b-label--add-file">Add files</label> <input type="file" id="add-file" class="b-input b-input--add-file"> </div> </div>

    1 answer 1

    For animation, you need to set the initial and final value of the max-height property.

     .b-form__group--form-comment { border: 2px solid #000; padding-left: 14px; padding-right: 10px; background: #fff; } .b-input--new-comment { display: block; width: 100%; resize: none; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; height: 56px; padding: 15px 10px 0 0; text-align: left; border: none; } .b-form__group--add-file { padding-bottom: 12px; opacity: 0; position: static; max-height: 0px; transition: 1s; } .b-label--add-file { width: 100%; text-align: left; font-size: 12px; line-height: 18px; cursor: pointer; } .b-input--add-file[type=file] { display: none; } .b-form__group.b-form__group--form-comment:hover .b-form__group--add-file { opacity: 1; display: block; max-height: 10px; transition: 1s; position: static; } 
     <div class="b-form__group b-form__group--form-comment"> <textarea placeholder="Type message…" class="b-input b-input--new-comment"></textarea> <div class="b-form__group b-form__group--add-file"> <label for="add-file" class="b-label b-label--add-file">Add files</label> <input type="file" id="add-file" class="b-input b-input--add-file"> </div> </div>

    • and how to make that in the opposite direction as smoothly decreased? - drtvader
    • @drtvader Modified code: added animation of the parameter height for b-form__group - form-comment - Dmitry Kulevich
    • Unfortunately the height is not limited may be. Do I have any other options? - drtvader
    • It is necessary to think, now at work, there is no time yet. I will come home, I will try to see - Dmitry Kulevich
    • Thank! Or maybe there is already js animation needed? - drtvader