CSS Fade Animation with Text Not Working on the Left of a Button-CodePudding

I'm working on CSS fade animations where I have some text fade in on the left of a button when the user hovers over it. The fade in works when the text is to the right of the button but it doesn't work when the text is to the left of the button. This is my html code for the hidden text and the button:

<div  style="width: 20vh">
    <div >
        <div>
            <h2><b>Go to Other Page</b></h2>
        </div>
    </div>

    <div >
        <a href="{% url 'login' %}">
            <button >
                <img src="{% static 'images\leftarrow.svg' %}" alt="leftarrow"/>
            </button>
        </a>
    </div>

</div>

This is my css code:

.hide {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear;
}


.fadebutton:hover   .hide {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s linear;
}

Note that the fade in effect works when the "fadebutton" div is written before the "hide" div but then the text would be on the right of the button, which is not what I need.

CodePudding user response：

I removed the vheight. It's showing me the desired behavior.

Code Updated.

.hide {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear;
}


.fadebutton:hover   .hide {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s linear;
}
.container{
  display:flex;
}

<div  style="width:500px">
        <div >
        <a href="{% url 'login' %}">
            <button >
                <img src="{% static 'images\leftarrow.svg' %}" alt="leftarrow"/>
            </button>
        </a>
    </div>
  <div >
        <div>
            <h2><b>Go to Other Page</b></h2>
        </div>
    </div>
</div>