JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper"><a href="#">Test</a></div>

CSS

.wrapper {
    width: 100px;height: 100px;
    position: relative;
    background: red;
    overflow: hidden;
}
.wrapper a {
    display: block; width: 100px; height: 25px; 
    position: absolute; left: 50px; top: 40px;
    background: yellow;
    transition: opacity 1s;
    opacity: 0;
}
/* This is what breaks transition */
.wrapper:hover  {
    overflow: visible;
}
/* Transition of opacity is broken in FF */
.wrapper:hover a {    
    opacity: 1;
}