Html 如何在鼠标悬停在中央屏幕上时放大图片？

我正在尝试建立一个项目列表，并在表中显示它们的图片。我希望图片在屏幕中央放大，同时将鼠标悬停在上面。它们正在被放大，但图片没有显示在屏幕中央。如何将它们放置在屏幕中央

下面是这个故事的片段

thead，
tr，
运输署{
边框：1px纯蓝色；
}
img{
宽度：25px；
高度：30px；
-webkit过渡：所有1都易于使用；
-moz转换：所有1都容易进入；
-ms转换：所有1都容易进入；
过渡：所有1都容易进入；
}
img：悬停{
文本对齐：居中；
垂直对齐：居中；
-moz变换：标度（15）；
-webkit转换：规模（15）；
-o变换：标度（15）；
}
a{
文字装饰：无；
}
T-s
范围
尺寸
视图1
视图2
视图3
视图4
视图5
购买
伊佐德灰圆领
450
M-40
Donear NXG绿色半袖脱衣马球T恤
650
M，L
Donear NXG海军蓝半袖色块马球T恤
650
M，L

这将实现以下效果：

img:hover{
  vertical-align: center;
  -moz-transform:scale(15); 
  -webkit-transform:scale(15);
  -o-transform:scale(15);
  z-index:0;
  display : block;
  visibility : visible;
  left:50%;
  top:45%;
  position: absolute;
}

不过，我建议您使用伪元素之类的东西，将图像作为背景。使用此实现，您将遇到弹出问题，因为您实际上是在移动元素。希望有帮助

img:hover{
  vertical-align: center;
  -moz-transform:scale(15); 
  -webkit-transform:scale(15);
  -o-transform:scale(15);
  z-index:0;
  display : block;
  visibility : visible;
  left:50%;
  top:45%;
  position: absolute;
}