Let's make a smooth hover transition for a simple div that we created.
A common problem is creating a smooth hover effect when initializing the hover, but when the cursor leaves the element, it snaps back to place instead of transitioning smoothly back to it's original position.
To fix this, we have to move the transition property to the div that we are hovering and not in our pseduo class. Checkout the example below.