I've successfully implemented a hover effect on my website that smoothly transitions in as users interact with links. However, I am facing an issue where the shadow and other attributes disappear abruptly when the user stops hovering over the box. Is there a way to achieve a fading effect both on hover-in and hover-out by making use of a pseudo-class like :un-hover? Any advice or guidance would be greatly appreciated! Here is the CSS block for reference:
a.squares:hover, a.squares:active {
color: black;
background-color: #E8E8E8;
box-shadow: 0 0 12px black;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
-moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}