Hover and change image

Question

I am trying to make a website with blazor and want to have an image that shows part of a larger photo, and if someone hovers over it for 3-5 seconds it'll scale up but be a different image. I would guess there might be a tooltip or something that would be helpful, but not sure with the hover causing a different image all together.

Answer 1

It's not really Blazor specific, it's something that can be done with CSS.

It's not very clear what you mean with "..an image that shows part of a larger photo.."

This example shows how you can hover over an image where the image will scale up and then change after some time.

Add some css to your style sheet file:

.default-image {
    display: block;
    width: 200px;
    height: 200px;
    background-image: url('/images/Cap1.png');    
    background-size: contain;
    background-repeat: no-repeat;
}

.hovering {
    display: block;
    width: 200px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('/images/Cap1.png');
    transform: scale(2.0);
}

    .hovering:hover {
        transition-delay: 1s;
        transition-duration: 0s;           
        background-image: url('/images/Cap2.png');        
    }

Then add a <div> that contains the default image and another <div> that will show the changed image.

You can use the @onmouseover and @onmouseout events. (and possibly the @ontouchenter and @ontouchleave)

<div class="default-image"
     @onmouseout="@OnMouseOut"
     @onmouseover="@OnMouseOver">
    <div class="@_HoverImageCSSClass">
        @*this will be used for the transformed image*@
    </div>
</div>

@code {

    bool _IsHovering = false;
    string _HoverImageCSSClass = "";

    protected void OnMouseOver(MouseEventArgs mouseEvent)
    {
        if (!_IsHovering)
        {
            _IsHovering = true;
            _HoverImageCSSClass = "hovering";
            StateHasChanged();
        }
    }

    protected void OnMouseOut(MouseEventArgs mouseEvent)
    {
        _HoverImageCSSClass = "";
        _IsHovering = false;
        StateHasChanged();
    }
}

I used the _IsHovering variable so that the class is only set once when the mouse is moving within the image.

The transition-delay is 1 second and transition-duration is 0, but this can obviously be changed to your needs.

This will give you this effect: