CSS: как масштабировать изображение из центра вместо верхнего левого

Итак, моя проблема в том, что у меня есть изображение, и я установил его CSS для

max-width: 100%

который масштабирует его при более низких разрешениях (как будет видно на скрипке ниже). Я хочу, чтобы переход вступил в силу из центра изображения.

В настоящее время; и из того, что я видел из большинства переходов, которые я сделал с использованием масштаба, они расширяются из верхнего левого угла.

вот моя скрипка: http://jsfiddle.net/Eolis/3ya98xh8/3/

Ответ 1

Просто замените width: 400px; на transform: scale(2,2) на :hover.

img {
    width: 100%; max-width: 100%;
}
div {
    position: absolute; left: 20%; top: 20%;
    width: 250px;
    transition: all 2s ease-in-out;
}
div:hover {
    transform: scale(2,2)
}

<div>
    <a href="http://photobucket.com/images/cat" target="_blank">
        <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>
    </a>
</div>

Ответ 2

Добавьте это в div:hover:

transform: translateX(-25%) translateY(-25%);

Вот сценарий: http://jsfiddle.net/3ya98xh8/4/

Ответ 3

может также выкинуть мое решение на случай, если оно будет полезно любому:

:: CSS::

img {
    width: 100%; max-width: 100%;
}
div {
    position: absolute; left: 50%; top: 50%;
    margin-left: -125px; margin-top: -100px;
    width: 250px;
    transition: all 2s ease-in-out;
}
div:hover {
    margin-left: -200px; margin-top: -150px;
    width: 400px;
}

:: HTML::

<div>
    <a href="#" onclick="location.href='http://photobucket.com/images/cat'; return false;" target="_blank">
        <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>
    </a>
</div>

:: Скрипки:: http://jsfiddle.net/Eolis/3ya98xh8/5/