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

Question

我试图建立一个项目列表与他们的图片在一张桌子。我想让图片在屏幕中央放大，同时将鼠标悬停在屏幕上。他们正在放大，但图片没有显示在屏幕的中心。我怎样才能将它们放置在屏幕的中心？

这里的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> 

Answer 1

这个片段将达到的效果：

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

不过，我建议你使用类似与作为背景图像伪元素。有了这个实现，你会得到弹出的问题，因为你是从字面上移动元素。希望有所帮助。