Расширение изображения на паряке ⇐ Html

[Anonymous]

Код: https://jsfiddle.net/xakhlafd/

Привет,

Я пытаюсь увеличить изображение на Hover и использовать легкий переход. Это работает, но, кажется, иногда изгибается. Я попытался исправить это, настройка: < /p>

-webkit-transition-property: height,width;
< /code>

Но безрезультатно. Кроме того, я пытаюсь понять, как автор этого кода (я получил часть кода из блога CSS), достигает этого. Я понимаю, как при колебании изображение меняет ширину, но я не уверен, почему автор устанавливает отрицательные и левые значения. Я пытался отредактировать ширину, высоту, верхнюю часть и оставлен, чтобы получить желаемый размер на парижке, но, похоже, она искажена - вероятно, потому, что я не понимаю, что делают отрицательные и левые значения. Кто -нибудь может пролить свет на это? Я прочитал некоторые статьи о негативных полях, но я не понимаю, что здесь делается. < /P>

Вот код: < /p>



.thumbnail{
width: 100px;
height: 100px;
}
.thumbnail:hover {
position:relative;
top:-50px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}


Подробнее здесь: https://stackoverflow.com/questions/432 ... e-on-hover