我正在尝试使用表格中的图片构建项目列表。我想让图片在屏幕中央放大,同时将鼠标悬停在屏幕中央。它们正在被放大,但图片没有显示在屏幕的中央。如何将它们放置在屏幕中央?
以下是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>
答案 0 :(得分:0)
这将达到效果:
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;
}
但是我建议您使用类似伪元素的图像作为背景。使用此实现,您将遇到弹出问题,因为您实际上正在移动元素。希望有所帮助。