WPF Toggle-Button hover animation issue

Question

In my WPF application, I've created 3 different custom toggle button styles. I would like to add a colour animation anytime a button is hovered over, so using Event Triggers and Color Animation storyboards, this is what I've done;
BTW, there's an image in the each of the toggle buttons styles.

Toggle Button Style

<Style x:Key="ExeatKey" TargetType="ToggleButton">
            <Setter Property="Foreground" Value="#B2B2B2"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Margin" Value="0 0 0 0"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid Margin="0 0 0 0" VerticalAlignment="Center" HorizontalAlignment="Center">
                            <Image Margin="0 10 0 30">

                                <!--Image Change Colour Trigger-->
                                <Image.Style>
                                    <Style TargetType="{x:Type Image}">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding ElementName=takeExeatBtn, Path=IsChecked}" Value="True">
                                                <Setter Property="Source" Value="/Images/Others/Button Icons/ex_blu.png"/>
                                            </DataTrigger>
                                            <DataTrigger Binding="{Binding ElementName=takeExeatBtn, Path=IsChecked}" Value="False">
                                                <Setter Property="Source" Value="/Images/Others/Button Icons/ex_gray.png"/>
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </Image.Style>

                            </Image>
                            <TextBlock Text="Take An Exeat" TextAlignment="Center" FontSize="20" Margin="0 58 0 0" FontWeight="SemiBold"/>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>

            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation To="#BCD0E8" Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation To="Transparent" Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Cursor" Value="Hand"/>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Cursor" Value="Hand"/>
                    <Setter Property="Background" Value="#BCD0E8"/>
                    <Setter Property="Foreground" Value="#5050EA"/>
                </Trigger>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Cursor" Value="Arrow"/>
                    <Setter Property="Background" Value="#BCD0E8"/>
                    <Setter Property="Foreground" Value="#7878FF"/>
                </Trigger>
            </Style.Triggers>
        </Style>

Now naturally, I thought that this would work, but whenever the mouse enters it doesnt animate, only MouseLeave works.
Is there something that I've missed in the code?