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

У меня есть изображение в sqare, которое превращается в круг, используя радиус границы: 50%; До сих пор это очень хорошо. ;) Но следующий шаг трудно сделать: я хочу, чтобы изображение увеличивалось «ближе» с помощью transform: scale. Я имею в виду: я не хочу менять один и тот же размер изображения, он должен оставаться с одинаковым диаметром. Но я хочу показать небольшую часть изображения. Масштабирование должно быть активировано на: hover и должно обрабатываться в течение 0,8 сИзображение с граничным радиусом 50% и преобразование (масштаб)

Мой код отлично работает в Firefox, но в Chrome и Safari этого не происходит. Где мои ошибки?

Мой HTML:

<div class="hopp_circle_img"> 
    <img src="... alt="" /> 
</div>

Мой 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); 
    }

Проблемы:
1) Хром: "зум" работает, но в течение переходного времени (о, 8s) изображение имеет границы sqare. После того, как это произошло, они округлились.

2) Safari: Переходное время игнорируется, переход происходит немедленно, без «мягкого» масштабирования.

3) IE: Я не осмелился взглянуть на IE, если он даже не работает в Safari и Chrome. ;)

Спасибо за ваши идеи. Я пробовал много разных вещей, никто из них не работал. Рафаэль

источник

2016-11-29 rabox66

Для вашего 1-й вопрос, ответ здесь - http://stackoverflow.com/questions/31693219/issue-while-using-transitions-opacity-change-overflow-hidden/31698580#31698580 – Harry

Спасибо, но как я могу решить проблему? iI также попытался поместить слой с изображением по кругу, чтобы замаскировать круг, пока он растет. Проблема в том, что маска останавливает: hover. Так что это более или менее бесполезно. – rabox66

Он находится в разделе «Что такое решение? **» этого ответа и в ответе, который предоставил LGSon здесь. Разве они не помогут вам решить первую проблему? – Harry

С Harry's предложение исправить квадрат, этот должен работать и в Safari.

Во-первых, приставочные свойства должны быть перед префикса, второй, не используйте все как в

transition: all ...

имя свойства будет переведен, в этом случае

transition: transform 0.8s

Примечание , вам необходимо добавить обратно остальные префиксные свойства

.hopp_circle_img { 
 
    position: relative;   /* new property added */ 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
    max-width: 100% !important; 
 
    max-height: 100% !important; 
 
    overflow: hidden; 
 
    -webkit-border-radius: 50%; 
 
    border-radius: 50%; 
 
    z-index: 0;     /* new property added */ 
 
} 
 
.hopp_circle_img img { 
 
    -webkit-transition: transform 0.8s; /* re-ordered property, named  */ 
 
    transition: transform 0.8s;   /* what to be transitioned   */ 
 
} 
 
.hopp_circle_img img:hover { 
 
    display: block; 
 
    z-index: 100; 
 
    -webkit-transform: scale(1.25); 
 
    transform: scale(1.25); 
 
}

<div class="hopp_circle_img"> 
 
    <img src="http://lorempixel.com/400/400/nature/1" alt="" /> 
 
</div>

источник

2016-11-29 16:35:32 LGSon

Благодарим вас за очищение моего кода. Тем не менее он не работает в Chrome. В вашем (очищенном) коде есть новый z-index-staple.Это одно из предложений в решении What's? раздел. Но это не решает мою проблему. – rabox66

@ rabox66 Это работает в Chrome. Убедитесь, что вы не забыли 'position: relative;' на '.hopp_circle_img', который необходим для' z-index' для работы – LGSon

LGSon. Большое спасибо! Я попробую еще раз, но вы все отлично подготовили для меня, поэтому мне пришлось только скопировать код. Возможно, это кеш. Я действительно работаю над wordpress-installtion с помощью кэширующего плагина. Это может быть очень неприятно. – rabox66

ОК, у меня есть первый успех: Изменение .hopp_circle_img img:hover в .hopp_circle_img:hover исправили эту проблему в Safari. Но он все еще остается в Chrome.

источник

2016-11-29 16:25:17 rabox66

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

ответ

Смежные вопросы