Question

When I resize my image with the :hover property it does get larger, but it resizes from the left and out, instead of from the center and out…

My code
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

Try this, maybe this is the effect you want to achieve…

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