マウスの上にマウスを置いたまま、中央の画面で写真を拡大するには？

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

私はあなたが背景として画像と擬似要素のようなものを使用することをお勧めしますが。この実装では、文字通り要素を移動しているので、ポップの問題が発生します。希望が役立ちます。