html - 调整图像悬停从中心向外而不是从左侧向外

Question

当我使用 :hover 属性调整图像大小时，它确实变大了，但它是从左向外调整大小，而不是从中心向外调整...

我的代码 HTML:

<a href=""><img src="cover (1).jpg"class="cover"><a>
<a href=""><img src="cover (2).jpg"class="cover"><a>
<a href=""><img src="cover (3).jpg"class="cover"><a>
<a href=""><img src="cover (4).jpg"class="cover"><a>

CSS:

img.cover{
height:100px;
Width:100px;
padding-top:25px;
position:relative;
left:290px; 
}

img.cover:hover {
height:150px; 
width:150px;
margin-top:-25px;
vertical-align:top;
position:relative;
-webkit-transition:  2s; /* Safari and Chrome */

}

Answer 1

试试这个，也许这就是你想要达到的效果...

img.cover:hover {
margin-left: -25px;
margin-right: -25px;
}