flutter web zoom and pan on mouse hover

Question

iam working on flutter web project and i need to make widget contain image that zoom and pan on mouse hover i tried using mouse region + InteractiveViewer but i can't make it work the way i wanted

iam trying to mimic this: https://sb-topdeal2.mybigcommerce.com/sample-laundry-detergent/ ( try to hover on the image )

MouseRegion(
              onExit: (event) {
                transformationController.value = Matrix4.identity();
              },
              onHover: (h){
                print(h.position.dy);
                transformationController.value = Matrix4.identity()
                  ..translate(h.position.dx , h.position.dy)
                  ..scale(1.5);
              },
              child: Container(
                height: Responsive.is1200(context) ? 360 : 260,
                child: InteractiveViewer(
                    scaleEnabled: false,
                    panEnabled: true,
                    minScale: 0.1, // min scale
                    maxScale: 1.0, // max scale
                    transformationController: transformationController,
                    child: Image.asset(
                      image,
                    )),
              ),
            )