Изменение размера img зависания от центра и наружу вместо левой стороны и наружу

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

Если во всех случаях вы знаете, какими будут размеры ваших изображений, вы можете сделать это, отобразив изображение в виде блочного элемента и изменив отступ, а также размеры при наведении.

CSS:

a img {
    display: block;
    width: 100px;
    height: 100px;
    padding: 25px;
    background-color: red;
}

a img:hover {
    width: 150px;
    height: 150px;
    padding: 0;
}

HTML:

<a href=""><img src="" /></a>
<a href=""><img src="" /></a>
<a href=""><img src="" /></a>

Вот демонстрационная версия jsfiddle:

http://jsfiddle.net/5dMbt/

Answer 2

Попробуйте, может быть, именно этого эффекта вы хотите добиться ...

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

Answer 3

Добавьте margin-top:-25px; или left:265px; к img.cover:hover

Answer 4

Вам необходимо настроить свойства left и top в вашем .hover css. Попробуйте:

left:-25px;
right:-25px;