DEV Community

Brandon Weaver
Brandon Weaver

Posted on

1 2

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.

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more