How to do simple hover button using 2 images in Silverlight

Question

Preferably without using backend code? I'm looking for the cleanest solution for doing a fade in fade out hover button using 2 images. Here is what I have so far

Edit:

I got this to partially work.. problem is now that the mouseout seems abrupt whereas the mouseover seems fine, what am I doing wrong?

<VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Normal" />
    <VisualState x:Name="MouseOver">
        <Storyboard>
            <DoubleAnimation BeginTime="0:0:0" Duration="0:0:1" To="1" 
                                Storyboard.TargetProperty="(UIElement.Opacity)" 
                                Storyboard.TargetName="mouseOverImage" d:IsOptimized="True"/>
            </Storyboard>
    </VisualState>
    <VisualState x:Name="MouseOut">
        <Storyboard>
            <DoubleAnimation BeginTime="0:0:0" Duration="0:0:1" To="0" 
                                Storyboard.TargetProperty="(UIElement.Opacity)" 
                                Storyboard.TargetName="mouseOverImage" d:IsOptimized="True"/>                                         
        </Storyboard>
    </VisualState>
    <VisualState x:Name="Pressed"/>
    <VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
    <VisualState x:Name="Focused"/>
    <VisualState x:Name="Unfocused"/>
</VisualStateGroup>

Answer 1

Found out there is no default visual state called mouseout. the normal state will work as the mouseout or mouseleave.

                                    <Storyboard>
                                        <DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.5" From="0" To="1" 
                                                            Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                            Storyboard.TargetName="mouseOverImage" />                               
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.5" From="1" To="0" 
                                                            Storyboard.TargetProperty="(UIElement.Opacity)" 
                                                            Storyboard.TargetName="mouseOverImage" />
                                     </Storyboard>