html - 将鼠标悬停在中央屏幕上时如何放大它们？

我试图建立一个项目列表，并在表格中显示其图片。我希望将鼠标悬停在图片上时图片在屏幕中央放大。它们正在放大，但图片未显示在屏幕中央。如何将它们放置在屏幕中央？

这是code的代码段

<style>
thead,
tr,
td {
  border: 1px solid blue;
}
img {
  width: 25px;
  height: 30px;
  -webkit-transition: all 1s ease-in;
  -moz-transition: all 1s ease-in;
  -ms-transition: all 1s ease-in;
  transition: all 1s ease-in;
}
img:hover {
  text-align: center;
  vertical-align: center;
  -moz-transform: scale(15);
  -webkit-transform: scale(15);
  -o-transform: scale(15);
}
a {
  text-decoration: none;
}
</style>

<table>
  <tr>
    <td>Tee-s</td>
    <td>range</td>
    <td>sizes</td>
    <td>view 1</td>
    <td>view 2</td>
    <td>view 3</td>
    <td>view 4</td>
    <td>view 5</td>
    <td>buy</td>
  </tr>
  <tr>
    <td>IZOD Gray Round Neck</td>
    <td>450</td>
    <td>M-40</td>
    <td>
      <img src="http://n3.sdlcdn.com/imgs/a/z/7/IZOD-Gray-Round-Neck-SDL834378448-1-10f63.jpg">
    </td>
    <td>
      <img src="http://n4.sdlcdn.com/imgs/a/z/7/IZOD-Gray-Round-Neck-SDL834378448-2-1623f.jpg">
    </td>
    <td>
      <img src="http://n1.sdlcdn.com/imgs/a/z/7/IZOD-Gray-Round-Neck-SDL834378448-3-34272.jpg">
    </td>
    <td>
      <img src="http://n4.sdlcdn.com/imgs/a/z/7/IZOD-Gray-Round-Neck-SDL834378448-4-5c23e.jpg">
    </td>
    <td>
      <img src="http://n3.sdlcdn.com/imgs/a/z/7/IZOD-Gray-Round-Neck-SDL834378448-5-396b6.jpg">
    </td>

    <td><a href="http://www.snapdeal.com/product/izod-gray-round-neck/671100311218">snap</a>
    </td>
  </tr>
  <tr>
    <td>Donear NXG Green Half Sleeves Stripers Polo T-Shirt</td>
    <td>650</td>
    <td>M , L</td>
    <td>
      <img src="http://n2.sdlcdn.com/imgs/b/c/4/Donear-NXG-Green-Half-Sleeves-SDL736800025-1-29669.jpg">
    </td>
    <td>
      <img src="http://n3.sdlcdn.com/imgs/b/c/4/Donear-NXG-Green-Half-Sleeves-SDL736800025-2-83c4f.jpg">
    </td>
    <td>
      <img src="http://n4.sdlcdn.com/imgs/b/c/4/Donear-NXG-Green-Half-Sleeves-SDL736800025-3-6c63f.jpg">
    </td>
    <td>
      <img src="http://n1.sdlcdn.com/imgs/b/c/4/Donear-NXG-Green-Half-Sleeves-SDL736800025-4-9fcd4.jpg">
    </td>
    <td>
      <img src="http://n2.sdlcdn.com/imgs/b/c/4/Donear-NXG-Green-Half-Sleeves-SDL736800025-5-6fa23.jpg">
    </td>
    <td><a href="http://www.snapdeal.com/product/donear-nxg-green-half-sleeves/626643395322">snap</a>
    </td>
  </tr>
  <tr>
    <td>Donear NXG Navy Half Sleeves Color Blocks Polo T-Shirt</td>
    <td>650</td>
    <td>M , L</td>
    <td>
      <img src="http://n2.sdlcdn.com/imgs/b/c/4/Donear-NXG-Navy-Half-Sleeves-SDL736268703-1-4ac59.jpg">
    </td>
    <td>
      <img src="http://n4.sdlcdn.com/imgs/b/c/4/Donear-NXG-Navy-Half-Sleeves-SDL736268703-2-feafc.jpg">
    </td>
    <td>
      <img src="http://n3.sdlcdn.com/imgs/b/c/4/Donear-NXG-Navy-Half-Sleeves-SDL736268703-3-2622a.jpg">
    </td>
    <td>
      <img src="http://n1.sdlcdn.com/imgs/b/c/4/Donear-NXG-Navy-Half-Sleeves-SDL736268703-4-9e956.jpg">
    </td>
    <td>
      <img src="http://n3.sdlcdn.com/imgs/b/c/4/Donear-NXG-Navy-Half-Sleeves-SDL736268703-5-2a00b.jpg">
    </td>
    <td><a href="http://www.snapdeal.com/product/donear-nxg-navy-half-sleeves/625967695961">snap</a>
    </td>
  </tr>
</table>

最佳答案

这样可以达到以下效果：

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;
}

但是，我建议您使用类似伪元素的图像作为背景。使用此实现，您会遇到弹出问题，因为您实际上是在移动元素。希望能有所帮助。