Adding mouse out animation to Muse

[Cliffsta B]

It would be great if the chaps at Muse could add a little extra button state for mouse out on items. I know its not standard CSS, which is why it probably has been implemented.

Nonetheless, I am pretty sure it would be quite simple to customise the CSS. So my question is this: Given that I have a simple colour transition from one colour to the next already set in Muse. If I define the button as a graphic style, and thus a class - What do I need to add into the page CSS to define it to animate on "out".

I found this handy little bit of CSS that does it with opacity, but I want to just do it to the existing muse :hover transition:

.item {  

    height:200px;

    width:200px;

    background:red;

    -webkit-transition: opacity 1s ease-in-out;

       -moz-transition: opacity 1s ease-in-out;

        -ms-transition: opacity 1s ease-in-out;

         -o-transition: opacity 1s ease-in-out;

            transition: opacity 1s ease-in-out;

}

.item:hover {

    zoom: 1;

    filter: alpha(opacity=50);

    opacity: 0.5;

}

From:

Edit fiddle - JSFiddle

[Cliffsta B · Accepted solution]

Sorry folks. I think I sorted this out. Just add a transition to the initial NORMAL state and the button will animate on OUT.

I am being daft.