WPF: On Mouse hover on a particular control, increase its size and overlap on the other controls

Question

I wish to increase the size of a control whenever the user hovers the mouse.
The size increase should not readjust the other controls, rather the current control should overlap the neighboring controls as is the case with google search (images tab) shown below:

The image with red border overlaps the other images.

Answer 1

You could use ScaleTransform in RenderTransform on IsMouseOver. If you want the Scaling to be done from the Center of the Control you can use RenderTransformOrigin="0.5,0.5". Also, you'll probably need to set the ZIndex in the Trigger to make sure it is displayed on top of the other Controls. Example with a TextBlock

Update
Try it like this

<ItemsControl Margin="50">
    <ItemsControl.Resources>
        <Style x:Key="ScaleStyle" TargetType="TextBlock">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Grid.ZIndex" Value="1"/>
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ItemsControl.Resources>
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="Something.." Background="Red" Height="20"/>
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock2" Background="DarkBlue" Height="20"/>
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock3" Background="DarkBlue" Height="20" Foreground="White"/>
    <TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock4" Background="DarkBlue" Height="20" Foreground="White"/>
</ItemsControl>