0

Требуется анимация зума картинки при ховере. Мой способ, описанный ниже, работает во всех браузерах кроме сафари. На сафари оно работает как на видео: https://drive.google.com/file/d/1MWCynYB64jxXPYpYaa3LkplrwWGf1Xko/view

Единственный совет, который я получил - убрать transition, но мне нужно чтоб анимация происходила плавно

HTML

<div class="item">
   <div class="img-wrapper">
     <img class='img'>  
   </div>
 </div>

CSS

.img-wrapper {
  width: 220px;
  height: 220px;
  border: solid 8px #ffffff;
  border-radius: 110px;
  overflow: hidden;
}
.img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 110px;
}
.item:hover .img-wrapper img {
  transform: scale(1.1);
}
4
  • Странно, что оно у вас вообще работает. У вас для transition не указаны ни свойство, которое вы хотите анимировать, ни тайминг-функция.
    – Hikikomori
    Commented 17 июл. 2018 в 9:41
  • @Hikikomori ваш комментарий мало помогает делу
    – stdnik
    Commented 17 июл. 2018 в 9:45
  • Это вам был намек попробовать указать недостающие параметры, и посмотреть на результат.
    – Hikikomori
    Commented 17 июл. 2018 в 9:47
  • @Hikikomori это вам был намек что это не поможет
    – stdnik
    Commented 17 июл. 2018 в 9:53

2 ответа 2

0

Попробуйте добавить префикс для Safari и к картинке

-webkit-

.item:hover .img-wrapper img {
  -webkit-transform: -webkit-scale(1.1);
}
2
  • Префикс добавляется сборщиком, и проблема присутствует несмотря на префикс
    – stdnik
    Commented 17 июл. 2018 в 9:55
  • Всё очень просто (похоже)! Увеличьте бордер радиус до 50% (вместо 110px) Commented 17 июл. 2018 в 10:08
0

Проблема была исправлена заменой transform: scale(1.1) на это:

width: 110%
height: 110%
margin-left: -5%
margin-top: -5%

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.