Stacking Elements to Solve Transition Issues

I recently stumbled into a problem while attempting to create a transition for an anchor tag which used a linear gradient background. Unfortunately, the gradient background will not transition smoothly from a regular one; here's a neat solution to the problem.

Here, I used a container to act as the true position of the elements using position: relative, and placed the 'top' div over the 'base' div using position: absolute; top: 0; left: 0;. From there, I simply set the opacity of the 'top' div to zero percent, and one hundred percent when the hover state is triggered; creating the illusion of a transition from a gradient background to regular, and vice versa.