You can replace your background images with CSS borders and transition them, here is an approximation of your website:
ul li a {
color: white;
text-decoration: none;
font: bold 15px/150% sans-serif;
text-transform: uppercase;
padding: 2px 5px;
border-bottom: solid #384740 3px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
ul li a:hover {
color: #BDE2DF;
border-bottom-color: #66FFB2;
}
To transition border colors you can either grab the computed color, or state your colors in rgba
or hsla
, such as...
ul li a { border-bottom: solid rgba(102, 255, 178, 0.1); }
ul li a:hover { border-bottom: solid rgba(102, 255, 178, 1.0); }