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

Question

[Faber Estello]

тут проблема
При ховере изображение сначала квадратное, а потом уже как положено становится. Как поправить данную проблему?
-webkit-radial-gradient не предлагать.

Answer 1

[x404]

Глюк в Хроме, в мозилле все работает как надо.
можно через 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;
}

Comments

[Faber Estello]

Добрый человек! Спасибо тебе!!!

Answer 2

[Максим]

transform:scale(1.3); - этого будет достаточно на hover

Comments

[Faber Estello]

проблема не в значении scale а в том, что при увеличении изображение сначала квадратным увеличивается, а потом уже становится круглым! А нужно, чтобы круглым и увеличивалось внутри враппера

[Максим]

Sen Selesss: я щас проверю и отпишусь

[Максим]

Sen Selesss: codepen.io/Geyan/pen/NNBLZw?editors=110 - это то что вам надо ?

[Faber Estello]

Максим Жаров: Нет! Должен увеличиваться не врап, а изображение внутри него!!!!

[afishr]

Максим Жаров: Нужно чтобы именно картинка внутри увеличивалась, а wrap оставался прежним

[Максим]

Sen Selesss: я прошу прощения - но такое извращение ни кто ни делает - увеличивают блок в котором img всегда 100%

[Максим]

Sen Selesss: хотя я проверю ща - момент

[Faber Estello]

Максим Жаров: ну не делают так не делают

[Максим]

Sen Selesss: codepen.io/Geyan/pen/pyZxoZ?editors=110 может быть так ?

[Faber Estello]

Максим Жаров: Спасибо! Есть уже ответ!

[Максим]

Sen Selesss: так там тоже увеличивают блок - а img всегда 100%

[Максим]

Sen Selesss: НУ ВАШЕ ПРАВО

[Максим]

Sen Selesss: ВС ТАКИ TRANSFORM:SCALE ; вы просто не признаете это

[Максим]

и мой пример работает везде

[Faber Estello]

Максим Жаров: хорошо! спасибо!