@senselessV7

Как исправить border-radius эффект увеличения?

тут проблема
При ховере изображение сначала квадратное, а потом уже как положено становится. Как поправить данную проблему?
-webkit-radial-gradient не предлагать.
  • Вопрос задан
  • 173 просмотра
Решения вопроса 1
absorberex
@absorberex
Делаю сайты
Глюк в Хроме, в мозилле все работает как надо.
можно через position:relative; z-index:1; У картинки, и position:relative;
z-index:2; у родительского блока вылечить проблемку.

.wrap {
  
  width: 130px;
  height: 130px;
  -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  overflow: hidden;
  border: 1px solid red;
  position:relative;
  z-index:2;

  
}

img {
  width: 100%;
  max-width: 100%;
  -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all .5s linear;
  -o-transition: all .5s linear;
  transition: all .5s linear;
}

.wrap:hover img {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  position:relative;
  z-index:1;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
LenovoId
@LenovoId
I want, women not to get sick
transform:scale(1.3); - этого будет достаточно на hover
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы