CSS3 transition for custom underline images

Question

Hi friends I am looking for a strictly CSS3 fix for opacity transitions on custom underlines using background-images and nested in a navigation list. I realise after some research that background-image transitions are not currently supported, I therefore attempted to construct an opacity transition using the pseudo class :before which I believe currently works in the latest versions of Chrome and Firefox. Any help that anybody could offer would be hugely appreciated, I've looked everywhere on the web and cannot find anybody else who has attempted to perform transitions on custom underline background-images so hopefully it might prevent a nice little challenge for somebody?

Here's the code I have currently:

.sf-menu, .sf-menu * {
margin:0 auto;
padding:0;
list-style: none;}


.sf-menu {
float: left;
margin-left:27%;}


ul.sf-menu li {
position:relative;
line-height:40%;
margin-left:10px;
margin-right:10px;}


ul.sf-menu > li {
float: left;}


ul.sf-menu li {
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */ }  


ul.sf-menu li:hover > a {
background: url(../images/UNDERLINE.png) repeat-x 100% 100%;
-webkit-opacity:1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;}


ul.sf-menu li:before  {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background: url(../images/UNDERLINE.png) repeat-x 100% 100%;
-webkit-opacity: 0.1;
-moz-opacity: 0.1;
opacity: 0.1;}`

You can also find the current framework for my site at www.mdwoodman.co.uk

Thanks in advance!

Answer 1

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); }

http://jsfiddle.net/de9wT/