Изображение с радиусом границы 50% и преобразованием (масштабом) ⇐ CSS

[Anonymous]

У меня есть квадратное изображение, которое превращается в круг с помощью border-radius: 50%; Пока это работает довольно хорошо. Но следующий шаг сделать сложно: я хочу, чтобы изображение приблизилось с помощью Transform: Scale. Я имею в виду: я не хочу менять размер изображения, оно должно оставаться того же диаметра. Но я хочу показать небольшую часть изображения. Масштабирование должно быть активировано при наведении курсора мыши и должно обрабатываться в течение 0,8 с.
Мой код отлично работает в Firefox, но в Chrome и Safari — нет. Где мои ошибки?
Мой HTML:

Код: Выделить всё

[img]... alt=[/img]

Мой CSS:

Код: Выделить всё

.hopp_circle_img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
overflow: hidden;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}

.hopp_circle_img img {

transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
}

.hopp_circle_img img:hover {
display: block;
z-index: 100;
transform: scale(1.25);
-moz-transform: scale(1.25);
-webkit-transform: scale(1.25);
-o-transform: scale(1.25);
-ms-transform: scale(1.25);
}

Проблемы:

• Chrome: «зум» работает, но во время перехода ( o,8s) изображение имеет квадратные рамки. После того, как переход произошел, они округляются.
• Safari:
  Время перехода игнорируется, переход происходит немедленно, без "мягкого" масштабирования.
• IE: Я не рискнул взглянуть на IE, если он даже в Safari не работает и Chrome.

Спасибо за ваши идеи. Я пробовал много разных вещей, но ничего не помогло.

Подробнее здесь: https://stackoverflow.com/questions/408 ... sformscale