Enlarge image in FluentGrid and display in another box

[DomenicoFormoso]

Hi, I would like my small image in TemplateColumn to display the larger image in a new frame when I hover over it. What is the best way to do this?

I thought of a Tooltip with the image inside:

 <TemplateColumn Title="Immagine" Align="@Align.Center" Width="50px">
     @{if (context.Immagine != null)
         {
             var imm = "data:image/jpg;base64," + Convert.ToBase64String(context.Immagine); ;
             <img id="immagine" src="@imm" style="width: 34px;border-radius:2px;" />
             <FluentTooltip Anchor="immagine">
                 <img src="@imm" style="width: 240px;border-radius:2px;" />
             </FluentTooltip>
         }
     }
 </TemplateColumn>

I would like an advanced control like this:

[vnbaaij]

Not really library related, but you probably need to use some JS interop for that. See for example https://www.delftstack.com/howto/html/html-click-image-to-enlarge/

[DomenicoFormoso]

Thanks for the suggestion now I'm happy with the tooltip., I create a component that I will use for each row:

  <TemplateColumn Title="Immagine" Align="@Align.Center" Width="50px">
      @{if (context.Immagine != null)
          {
              string imm = "data:image/jpg;base64," + Convert.ToBase64String(context.Immagine); 
              <ImmagineHoverZoom Immagine="@imm" Zoom="360px"/>
          }
      }
  </TemplateColumn>

the component is simply:

<img id="@uid" src="@Immagine" style="width: 34px;border-radius:2px;" />
<FluentTooltip Anchor="@uid">
    <img src="@Immagine" style="width: @Zoom;border-radius:2px;" />
</FluentTooltip>


@code {

    [Parameter] public string Immagine { get; set; }
    [Parameter] public string Zoom { get; set; } = "40px";

    string uid = Guid.NewGuid().ToString();

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
    }

}